Layout

Компонент Input Layout используется для создания формы с меткой и полем ввода.

Компонент InputLayout является оберткой, используемой для управления полями ввода с метками, валидацией и дополнительными функциями. Хотя не рекомендуется использовать InputLayout напрямую, он служит базовым компонентом для компонентов Input, select, aria, calendar и textEditor. Эта документация описывает доступные свойства и как с ними работать, предоставляя примеры для каждого свойства.

Свойства

mode

Стиль для компоновки ввода.

Тип: StyleMode или undefined

Описание: Свойство mode задает стиль для компоновки ввода. Оно может быть установлено в различные стили, такие как outlined, underlined или filled.

<Input mode="outlined" v-model="value"></Input>
<Input mode="filled" v-model="value"></Input>
<Input mode="underlined" v-model="value"></Input>

label

Текст метки для ввода.

Тип: string или undefined

Описание: Свойство label определяет текст метки для поля ввода. Он отображается рядом с элементом ввода, чтобы предоставить контекст пользователю.

Имя пользователя

<Input label="Username" v-model="value"/>

labelMode

Режим отображения метки.

Тип: LabelMode или undefined

Описание: Свойство labelMode определяет, как отображается метка. Оно может быть установлено в различные режимы, такие как " offsetDynamic", "vanishing" или "static".

Offset Dynamic

Offset Static

Dynamic

Static

Vanishing

<Input label="Offset Dynamic" labelMode="offsetDynamic" v-model="value"></Input>
<Input label="Offset Static" labelMode="offsetStatic" v-model="value"></Input>
<Input label="Dynamic" labelMode="dynamic" v-model="value"></Input>
<Input label="Static" labelMode="static" v-model="value"></Input>
<Input label="Vanishing" labelMode="vanishing" v-model="value"></Input>

isInvalid

Указывает, является ли ввод недействительным.

Тип: boolean или undefined

Описание: Свойство isInvalid - это булево значение, указывающее, находится ли элемент ввода в недействительном состоянии. Оно используется для целей валидации.

<Input isInvalid v-model="value"/>

messageInvalid

Сообщение об ошибке валидации для ввода.

Тип: string или undefined

Описание: Свойство messageInvalid содержит сообщение об ошибке валидации, которое отображается, когда ввод недействителен.

Это поле обязательно для заполнения.

<Input messageInvalid="This field is required." isInvalid/>

required

Помечает ввод как обязательный.

Тип: boolean или undefined

Описание: Свойство required - это булево значение, которое помечает поле ввода как обязательное. Оно указывает, что поле должно быть заполнено перед отправкой формы.

Имя пользователя

<Input label="Username" required/>

loading

Указывает, находится ли ввод в состоянии загрузки.

Тип: boolean или undefined

Описание: Свойство loading - это булево значение, указывающее, находится ли элемент ввода в состоянии загрузки. Оно используется для отображения индикатора загрузки.

<Input loading/>

disabled

Отключает поле ввода.

Тип: boolean или undefined

Описание: Свойство disabled - это булево значение, которое отключает поле ввода, делая его неинтерактивным.

outlined

filled

underlined

<Input disabled mode="outlined" v-model="value"></Input>
<Input disabled mode="filled" v-model="value"></Input>
<Input disabled mode="underlined" v-model="value"></Input>

help

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

Тип: string или undefined

Описание: Свойство help предоставляет дополнительный текст помощи, который отображается рядом с элементом ввода, чтобы помочь пользователю.

<Input help="Enter your username"/>

clear

Включает кнопку очистки для ввода.

Тип: boolean или undefined

Описание: Свойство clear - это булево значение, которое включает кнопку очистки для элемента ввода, позволяя пользователю очистить значение ввода.

<Input clear/>

width

Ширина компоновки ввода.

Тип: TWidth или undefined

Описание: Свойство width определяет ширину компоновки ввода. Оно может быть установлено в определенное значение или процент.

<Input width="100px" modelValue="100px"/>
<Input width="300px" modelValue="300px"/>
<Input width="500px" modelValue="500px"/>

height

Высота компоновки ввода.

Тип: THeight или undefined

Описание: Свойство height определяет высоту компоновки ввода. Оно может быть установлено в определенное значение.

<Input height="40px" modelValue="40px"/>
<Input height="50px" modelValue="50px"/>
<Input height="60px" modelValue="60px"/>

animation

Тип анимации для переходов внутри компоновки.

Тип: "transition-all duration-500" или "transition-none" или string или undefined

Описание: Свойство animation задает тип анимации для переходов внутри компоновки. Оно может быть установлено в предопределенные типы анимации или пользовательские значения.

<Input animation="transition-all duration-0"/>
<Input animation="transition-all duration-100"/>
<Input animation="transition-all duration-1000"/>

classBody

Пользовательский CSS-класс для тела компоновки.

Тип: StyleClass или "mb-6 rounded-md" или undefined

Описание: Свойство classBody позволяет вам применять пользовательские CSS-классы к телу компоновки ввода.

<Input classBody="custom-body-class"/>

class

Пользовательский CSS-класс для контейнера компоновки.

Тип: StyleClass или undefined

Описание: Свойство class позволяет вам применять пользовательские CSS-классы к контейнеру компоновки.

<Input class="custom-container-class"/>