Material Design Lite. Текстовые поля

Текстовые поля создаются на основе стандартных HTML-элементов <input type="text"> и textarea.

Классы для компонента.

mdl-textfield - Обязательный. Задаёт контейнер. Для внешнего контейнера div
mdl-js-textfield - Обязательный. Задаёт поведение компонента. Для внешнего контейнера div
mdl-textfield__input - Обязательный. Создаёт текстовое поле. Используется в input или textarea.
mdl-textfield__label - Обязательный. Создаёт надпись для текстового поля. Используется в label.
mdl-textfield--floating-label - Необязательный. Создаёт визуальный стиль. Используется во внешнем div.
mdl-textfield__error - Необязательный. Использует span для вывода ошибки. Используется при наличии атрибута pattern у input.
mdl-textfield--expandable - Обязательный. Определят внешний блок div для разворачивающего текстового поля.
mdl-button - Обязательный. Используется в качестве значка для разворачивающего текстового поля. Используется в label внешнего блока.
mdl-js-button - Обязательный. Задаёт поведение значка. Используется в label внешнего блока.
mdl-button--icon - Обязательный. Используется в качестве контейнера для значка для разворачивающего текстового поля. Используется в label внешнего блока.
mdl-input__expandable-holder - Обязательный. Контейнер для разворачивающего текстового поля. Используется во внутреннем блоке.
is-invalid - Необязательный. Задаёт текстовое поля как недействительное при начальной загрузке

Для однострочного текстового поля создайте блок div, внутри которого разместите элемент input с атрибутом type нужного варианта text и идентификатором id.

Также после текстового поля разместите элемент label с атрибутом for, у которого значение должно совпадать с идентификатором текстового поля. И задайте ему текст, используемый в качестве подсказки.


<div>
  <input type="text" id="user">
  <label for="user">User name</label>
</div>

При желании добавьте атрибут pattern для элемента input и свяжите с сообщением об ошибке, которое можно указать в элементе span сразу после label. Варианты шаблонов можно посмотреть здесь.


<div>
  <input type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label for="user">User name</label>
  <span>Letters and spaces only</span>
</div>

Добавьте MDL-классы для всех элементов.


<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label class="mdl-textfield__label" for="user">User name</label>
  <span class="mdl-textfield__error">Letters and spaces only</span>
</div>

Компонент готов к использованию.

Элемент textarea оформляется по такому же сценарию.


<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="3" maxrows="6"
   id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended (max. 6)</label>
</div>

Чтобы добавить разворачивающее текстовое поле, создайте внешний блок div, разместите в нём элемент label с атрибутом for, значение которого должно совпадать с идентификатором элемента input.

Внутри label разместите элемент i с классом material-icons и текстом, который задаёт значок. Текст для значков можно посмотреть здесь. Для примера использовалось слово search - это самый распространённый вариант для разворачивающего элемента.

Далее после label, но внутри внешнего блока создайте внутренний блок div


<div>
    <label for="expando1">
        <i class="material-icons">search</i>
    </label>
    <div>
       ...
    </div>
</div>

Теперь внутри внутреннего блока создайте элемент input с нужными атрибутами. После него создайте элемент label с атрибутом for и небольшим текстом.


...
    <div>
        <input type="text" id="expando1">
        <label for="expando1">Expandable text field</label>
    </div>
...

Добавьте MDL-классы.


<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
        <i class="material-icons">search</i>
    </label>
    <div class="mdl-textfield__expandable-holder">
        <input class="mdl-textfield__input" type="text" id="expando1">
        <label class="mdl-textfield__label" for="expando1">Expandable text field</label>
    </div>
</div>

Компонент готов к использованию.

Примеры

Текстовые поля для текста и чисел

Текстовые поля для текста и чисел с всплывающей надписью

Многострочный текст

Разворачивающее поле