Widgets ​

Для быстрой и чистой разработки формы была создана компонента FormField:

// import {FormField} from "jenesius-vue-form"
<form-field :type="type"/>

// import {FormField} from "jenesius-vue-form"
<form-field :type="type"/>

Со всеми разработанными типами можно ознакомится далее:

• Text
• Select
• Password
• Checkbox
• Single Checkbox
• Switch
• Radio
• Single Radio
• Tel
• Range
• Number
• Date
• File (в разработке)
• Email (в разработке)

Text ​

Поле по умолчанию. Обычное текстовое поле.

<form-field type="text"/>

<form-field type="text"/>

Кстати, параметр type в случае поля «Текст» можно не указывать.

Select ​

Представляет элемент, позволяющий выбрать значение из предоставленных.

Передаваемые параметры:

• options Набор перечислимых измерений. Существует два типа передачи: массив и объект. Разберем каждый подробнее, но рекомендуем использовать Array, чтобы избежать ошибок и непонятных моменты в вашем коде. Подробнее о options описано здесь

Password ​

Поле ввода пароля. Имеет возможность переключения режима видимости.

<input-field type="password"/>

<input-field type="password"/>

Checkbox ​

Элементы типа checkbox по умолчанию отображаются как отмеченные флажки. (отмечено) при активации, как вы можете видеть в официальной правительственной бумажной форме.

<input-field type="checkbox" :options="options"/>

<input-field type="checkbox" :options="options"/>

• options - аналогично с InputSelect

Single Checkbox ​

В случае, если на интерфейсе флажок будет только в одном экземпляре (как переключатель), можно использовать один флажок. Работает идентично, как и switch.

<input-field type="single-checkbox" name="use-password"/>

<input-field type="single-checkbox" name="use-password"/>

Switch ​

Переключающий элемент. Имеет два состояния: включение/выключение, что соответствует true/false.

<input-field type="switch"/>

<input-field type="switch"/>

Radio ​

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

<input-field type="radio" :options="options"/>

<input-field type="radio" :options="options"/>

• options - аналогично с InputSelect

Single Radio ​

Аналогично single-checkbox, но для ввода поля radio.

Tel ​

Элементы ввода типа тел используются для того, чтобы пользователь мог вводить и редактировать номер телефона.

<input-field type="tel"/>

<input-field type="tel"/>

Range ​

Элементы ввода типа range позволяют пользователю указать числовое значение, которое должно быть не меньше заданного значения, и не больше, чем другое заданное значение.

<input-field type="range" label="Volume"/>

<input-field type="range" label="Volume"/>

Options:

• min (Number) - Значение не будет меньше мин. Значение по умолчанию – 0.
• max (Number) - Значение не будет больше максимального. Значение по умолчанию — 100.
• step (Number) - Значение шага. По умолчанию 1.

Number ​

Элементы ввода типа номера используются для того, чтобы пользователь мог ввести число. Они включают встроенную проверку для отклонения нечисловые записи.

<input-field type="number" label="Age"/>

<input-field type="number" label="Age"/>

Options:

• step (число) - Значение шага. По умолчанию 1.

Дата ​

<input-field type="date" label="Created"/>

<input-field type="date" label="Created"/>

Options:

• step (Число) - Значение шага. По умолчанию 1.