Materialize css: есть ли класс, чтобы сделать текстовый префикс для ввода текста

Question

Мне нужно что-то, чтобы префикс моего входного текста в Materialise Css. Хотя он предоставляет класс ' prefix ' для этой цели, он не работает должным образом, когда мне нужно добавить несколько слов в качестве интервала. Для вашей информации мне нужно что-то эквивалентное Bootstrap input-group-addon class .

Код:

<div class="container">
      <div class="input-field">
        <span class="prefix">Full Name</span>
        <input type="text" name="" id="" />
      </div>
   <br> 
   <br> 
    <div class="input-field">
        <i class="prefix material-icons">attach_money</i>
        <input type="text" name="" id="" />
      </div>
   </div>

эта картинка показывает, что когда я использую одну иконку, она отлично работает, но не работает в случае нескольких слов

Я очень ценю ваши мудрые ответы.

Answer 1

Я думаю, вы неправильно поняли, что такое префикс css. Как указано в документах, он называется «Префикс значков» - из коробки они предоставляют возможность префикса с иконкой:

Префиксы значков Вы можете добавить префикс значков, чтобы сделать метку ввода формы. еще понятнее. Просто добавьте иконку с префиксом класса перед вводом и меткой.

<div class="input-field col s6">
  <i class="material-icons prefix">mode_edit</i>
  <textarea id="icon_prefix2" class="materialize-textarea"></textarea>
  <label for="icon_prefix2">First Name</label>
</div>

Класс span .prefix, который вы ' Попытка добавить не существует в материализации - она ​​предназначена для тега значка.

«Полное имя», способ, которым вы пытаетесь его использовать, в качестве подсказки к тому, что ввод - будет элемент метки. Префикс позволяет вам предоставлять информацию, которая добавляет к вводу (например, знак доллара) или сокращение, например, символ электронной почты.

Вы можете настроить ту же функцию из bootstrap, но это совсем другой элемент - и вам нужно перефразировать вопрос, сказав, что префикс не работает правильно, не является точным.

https://materializecss.com/text-inputs.html

РЕДАКТИРОВАТЬ:

Если мы погрузимся в css по умолчанию, вместо использования flex в Bootstrap, materialize css использует абсолютное позиционирование, поскольку оно предназначено для значков, которые имеют стандартную согласованную ширину:

.input-field .prefix {
    position: absolute;
    width: 3rem;
    font-size: 2rem;
    -webkit-transition: color .2s;
    transition: color .2s;
    top: .5rem;
}

input-field .prefix ~ input {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem);
}

Пиктограмме задается ширина 3рем, а затем вводу вводится 3 поля слева, чтобы разместить ее. Я настроил эти значения до 10rem, чтобы он работал для вашего ввода текста - но если текст был длиннее или короче, вам нужно было бы вручную обновить это новое значение rem:

https://codepen.io/doughballs/pen/XWbgWKg