Текстовое поле
Компоненты текстовых полей используются для сбора предоставленной пользователем информации.
API
Components.TextFields.
Components.TextFields.
Включить автофокусировку
Components.TextFields.
Применяет стиль ввода альтернативного ввода
Components.TextFields.
Components.TextFields.
Добавить функциональные возможности ввода, значок по умолчанию - Material Icons *clear
Применяет заданный цвет к элементу управления
Создаёт счётчик для входной длины. Если номер не указан, по умолчанию он равен 25. Не применяется какая-либо проверка.
Применяет тёмный вариант темы
Components.TextFields.
Отключает автоматическое отображение символов при наборе текста
Вставляет состояние ошибки в ввод вручную
Components.TextFields.
Вставляет состояние ошибки в ввод и передаёт пользовательские сообщения об ошибках. Будет сочетаться с любыми валидациями, которые возникают из rules. Это поле не инициирует проверку
Components.TextFields.
Сбрасывает тип ввода как полную ширину
Установка высоты компонента
Components.TextFields.
Components.TextFields.
Components.TextFields.
Применяет светлый вариант темы
Components.TextFields.
Примените специальную маску на вход. Для получения дополнительной информации см. Таблицу масок выше
Components.TextFields.
Components.TextFields.
Components.TextFields.
Components.TextFields.
Отображает префиксный текст
Components.TextFields.
Components.TextFields.
Components.TextFields.
Возвращает неизмененную строку в маске
Components.TextFields.
Массив функций, возвращающих True или String с сообщением об ошибке
Ярлык не перемещается на фокус/dirty
Components.TextFields.
Components.TextFields.
Components.TextFields.
Components.TextFields.
Отображает суффикс-текста
Устанавливает тип ввода
Задержка проверки до размытия
Контроль видимости
Дополнительный
Mask | Description |
---|---|
Masks | |
# | Any digit |
A | Any capital letter |
a | Any small letter |
N | Any capital alphanumeric character |
n | Any small alphanumeric character |
X | Any special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space |
Pre-made | |
credit-card | #### - #### - #### - #### |
date-with-time | ##/##/#### ##:## |
phone | (###) ### - #### |
social | ###-##-#### |
time | ##:## |
time-with-seconds | ##:##:## |
Примеры
Однострочная светлая тема
Однострочные текстовые поля не всплывают на метки с фокусом или с данными.
Disabled and readonly
Text fields can be disabled
or readonly
.
С иконкой
Иконки могут быть указаны как присоединённые или добавленные.
Clearable
When clearable
, you can customize the clear icon with clear-icon
.
Icon events
click:prepend
, click:append
, click:append-outer
, and click:clear
will be emitted when you click on the respective icon. Note that these events will not be fired if the slot is used instead.
Icon slots
Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.
Label slot
Text field label can be defined in label
slot - that will allow to use HTML content
Счётчик символов
Используйте счётчик, чтобы проинформировать пользователя о значении лимита. Счётчик не выполняет никакой проверки самостоятельно. Вам необходимо соединить его либо с внутренней системой проверки, либо с библиотекой сторонних разработчиков.
Ввод пароля
Ввод пароля может использоваться с добавленным значком и обратным вызовом для контроля видимости.
Валидация
Vuetify включает в себя простую проверку с помощью rules
. Подпрограмма принимает массив обратных вызовов. При проверке правил текущее значение v-model будет передано на обратный вызов. Этот обратный вызов должен возвращать либо true
, либо String
, сообщение об ошибке.
Текстовое поле полной ширины с символьным счётчиком
Полные текстовые поля позволяют создавать безграничные вводы. В этом примере мы используем v-divider
для разделения полей.
Текст подсказки
Свойство hint
в текстовых полях добавляет предоставленную строку под текстовым полем. Использование persistent-hint
сохраняет подсказку, когда текстовое поле не фокусируется.
Префиксы и суффиксы
Свойство prefix
и suffix
позволяет добавлять и добавлять встроенный немодифицируемый текст рядом с текстовым полем
Пользовательская проверка
Хотя встроенный в v-form
или сторонний плагин, такой как vuelidate или vee-validation может помочь упростить процесс проверки, вы можете просто контролировать его самостоятельно.
Стиль бокса
Текстовые поля могут использоваться с альтернативным дизайном бокса. Добавленная и присоединённая иконка перед именем реквизита не поддерживается в этом режиме.
Solo style
Text-fields can be used with an alternative solo design.
Outline style
Text fields can be used with an alternative outline design.
Пользовательские цвета
Вы можете при необходимости изменить текстовое поле на любой цвет в палитре Design Material. Ниже приведён пример реализации пользовательской формы с проверкой.
Маски
Текстовые поля могут проверять маски символов. Используя либо готовые, либо настраиваемые правила, вы можете форматировать и проверять конкретные наборы символов.
Progress bar
Вместо нижней строки можно отобразить индикатор выполнения. Вы можете использовать неопределённый прогресс по умолчанию, имеющий тот же цвет, что и текстовое поле, или назначить пользовательский, используя слот progress