Aria

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

Компонент Aria предназначен для ввода пользовательских данных и поддерживает различные настройки доступности и оформления.

<Aria v-model="value"></Aria>

Базовое использование компонента Aria предполагает привязку свойства данных через директиву v-model, что обеспечивает двустороннюю привязку данных между значением поля ввода и указанным свойством.

Плейсхолдер

Проп placeholder отображает подсказку внутри поля ввода, указывая на ожидаемый формат данных.

<Aria
    placeholder="Введите свой текст здесь"
    v-model="value">
</Aria>

Автозаполнение

Проп autocomplete управляет функцией автозаполнения браузера. Доступны значения "on" (включено) и "off" ( выключено).

<Aria
    autocomplete="on"
    v-model="value">
</Aria>
<Aria
    autocomplete="off"
    v-model="value">
</Aria>

Перенос текста

Проп wrap определяет поведение переноса текста. Доступные варианты: "soft" (мягкий), "hard" (жесткий) и "off" ( отключен).

<Aria
    wrap="soft"
    v-model="value">
</Aria>
<Aria
    wrap="hard"
    v-model="value">
</Aria>
<Aria
    wrap="off"
    v-model="value">
</Aria>

Количество строк

Проп rows задает количество видимых строк текстового поля (применяется для элементов textarea).

<Aria
    :rows="3"
    v-model="value">
</Aria>
<Aria
    :rows="5"
    v-model="value">
</Aria>
<Aria
    :rows="10"
    v-model="value">
</Aria>

Максимальная длина

Проп maxLength ограничивает максимальное количество символов для ввода.

<Aria
    :maxLength="50"
    v-model="value">
</Aria>
<Aria
    :maxLength="100"
    v-model="value">
</Aria>

Пользовательский CSS-класс

Проп classInput позволяет применить пользовательские CSS-классы к элементу ввода для индивидуального стилевого оформления.

<Aria
    classInput="custom-input-class"
    v-model="value">
</Aria>