Text fields components are used for collecting user provided information.
Ниже приведена коллекция простых и сложных примеров.
Однострочные текстовые поля не всплывают на метки с фокусом или с данными.
shaped text fields are rounded if they're outlined and have higher border-radius if filled.
Text fields can be disabled or readonly.
You can reduces the text field height with dense prop.
Иконки могут быть указаны как присоединённые или добавленные.
When clearable, you can customize the clear icon with clear-icon.
Use a counter prop to inform a user of the character limit. The counter does not perform any validation by itself. You will need to pair it with either the internal validation system, or a 3rd party library. You can use it on regular, box or outlined text fields.
When hide-details is set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display.
Ввод пароля может использоваться с добавленным значком и обратным вызовом для контроля видимости.
Текстовые поля могут использоваться с альтернативным дизайном бокса. Добавленная и присоединённая иконка перед именем реквизита не поддерживается в этом режиме.
Text-fields can be used with an alternative solo design.
Text fields can be used with an alternative outlined design.
Вы можете при необходимости изменить текстовое поле на любой цвет в палитре Design Material. Ниже приведён пример реализации пользовательской формы с проверкой.
Свойство hint в текстовых полях добавляет предоставленную строку под текстовым полем. Использование persistent-hint сохраняет подсказку, когда текстовое поле не фокусируется.
Свойство prefix и suffix позволяет добавлять и добавлять встроенный немодифицируемый текст рядом с текстовым полем
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.
Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.
Text field label can be defined in label slot - that will allow to use HTML content
Vuetify включает в себя простую проверку с помощью rules. Подпрограмма принимает массив обратных вызовов. При проверке правил текущее значение v-model будет передано на обратный вызов. Этот обратный вызов должен возвращать либо true, либо String, сообщение об ошибке.
Полные текстовые поля позволяют создавать безграничные вводы. В этом примере мы используем v-divider для разделения полей.
Вместо нижней строки можно отобразить индикатор выполнения. Вы можете использовать неопределённый прогресс по умолчанию, имеющий тот же цвет, что и текстовое поле, или назначить пользовательский, используя слот progress
Хотя встроенный в v-form или сторонний плагин, такой как vuelidate или vee-validation может помочь упростить процесс проверки, вы можете просто контролировать его самостоятельно.
Готовы к большему? Продолжить чтение с: