Начало работы

Введение Скачать Совместимость Библиотека JS-утилит Глобальные JS-методы Переход с 0.4.3 на 1.0.0

Стили

Цвета и темы Шрифт Roboto Сетка (Grid)Типографика Иконки Медиа Вспомогательные классы Тени

Плагины JavaScript

Collapse Headroom

Ресурсы

Иконки Material

Новый mdui 2 на базе Material Design 3 и Web Components уже здесь. Перейти к документации mdui 2.

Текстовое поле

Текстовые поля обычно используются в формах. Текстовые поля mdui поддерживают такие функции, как подсчет символов и валидация форм.

Можно использовать совместно с сеткой для верстки форм.

Использование

Инициализация происходит автоматически после загрузки страницы. Для динамически созданных текстовых полей необходимо вызвать mdui.mutation() для инициализации.

Цвет

Использование акцентного цвета.

Связанное чтение

Стиль

Однострочное текстовое поле

Пример самого простого текстового поля:

Пример

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>

Фиксированная метка

Пример

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text"/>
</div>

Плавающая метка

Пример

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" />
</div>

Отключенное состояние

Добавьте атрибут disabled к элементу .mdui-textfield-input, чтобы отключить текстовое поле.

Пример

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>

<!-- Фиксированная метка -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- Плавающая метка -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

Многострочное текстовое поле

Замените тег input на textarea для создания многострочного текстового поля. Многострочное текстовое поле автоматически подстраивает свою высоту под содержимое.

Пример

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>

<!-- Фиксированная метка -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Плавающая метка -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Отключенное состояние -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

Если добавить атрибут rows к textarea, высота текстового поля станет фиксированной.

Пример

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>

С вспомогательным текстом

Добавьте элемент <div class="mdui-textfield-helper"></div> в конец внутреннего блока <div class="mdui-textfield"></div>, чтобы добавить вспомогательный текст.

Пример

<div class="mdui-textfield">
  <input type="email" class="mdui-textfield-input" placeholder="Email" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

С иконкой

Пример

<div class="mdui-textfield">
  <i class="mdui-icon material-icons">email</i>
  <input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>

<!-- Фиксированная метка -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">account_circle</i>
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

<!-- Плавающая метка, многострочное текстовое поле -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <i class="mdui-icon material-icons">textsms</i>
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Отключенное состояние -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

Раскрывающееся текстовое поле

Пример

<div class="mdui-textfield mdui-textfield-expandable">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

Функции

Валидация формы

mdui использует HTML5 для валидации форм. Добавьте элемент <div class="mdui-textfield-error"></div> в конец внутреннего блока <div class="mdui-textfield"></div>, чтобы добавить сообщение об ошибке.

Если текстовое поле содержит и сообщение об ошибке, и вспомогательный текст, элемент вспомогательного текста должен располагаться после элемента сообщения об ошибке.

Пример

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" required />
  <div class="mdui-textfield-error">Имя пользователя не может быть пустым</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" required />
  <div class="mdui-textfield-error">Неверный формат email</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Password</label>
  <input
    class="mdui-textfield-input"
    type="text"
    pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
    required
  />
  <div class="mdui-textfield-error">Пароль должен содержать не менее 6 символов, включая заглавные и строчные буквы</div>
  <div class="mdui-textfield-helper">Пожалуйста, введите пароль длиной не менее 6 символов, содержащий заглавные и строчные буквы</div>
</div>

Помимо валидации HTML5, вы также можете использовать JavaScript для проверки.

Добавьте класс .mdui-textfield-invalid к текстовому полю, которое не прошло проверку, и удалите его после успешного прохождения.

Пример

<div class="mdui-textfield mdui-textfield-invalid">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-error">Имя пользователя уже существует</div>
</div>

Подсчет символов

Добавьте атрибут maxlength="" к элементу input, чтобы ограничить длину вводимых символов. mdui автоматически добавит счетчик символов в реальном времени в нижнем правом углу текстового поля.

Пример

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" maxlength="20" />
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" maxlength="60" />
  <div class="mdui-textfield-error">Неверный формат email</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>

Динамически создаваемые текстовые поля

Если ваши текстовые поля создаются динамически, необходимо вызвать mdui.mutation() для их инициализации.

Если вы динамически изменили содержимое текстового поля, необходимо вызвать метод mdui.updateTextFields() для его повторной инициализации. Метод может принимать в качестве параметра CSS-селектор (для элементов с классом .mdui-textfield), DOM-элемент или массив DOM-элементов для повторной инициализации только указанных текстовых полей. Если параметры не переданы, будут повторно инициализированы все текстовые поля на странице.

Список CSS-классов

Имя класса	Описание
`.mdui-textfield`	Определяет текстовое поле.
`.mdui-textfield-floating-label`	Определяет текстовое поле с плавающей меткой.
`.mdui-textfield-label`	Определяет метку (label) текстового поля.
`.mdui-textfield-input`	Определяет поле ввода (input/textarea) текстового поля.
`.mdui-textfield-error`	Определяет сообщение об ошибке при валидации формы.
`.mdui-textfield-helper`	Определяет вспомогательный текст текстового поля.

Раскрывающаяся панель

Элементы выбора