Инпуты

Простой инпут

Инпут с лейблом

Если не нравится мерцание плейсхолдера, просто не передавай плейсхолдер

Инпут с маской

Инпут с маской и лейблом

Инпут с любым элементом справа

Если передать в pd-input через слот любой контент, то он станет элементом справа. При этом отступ в инпуте посчитается автоматически.

Инпут с крестиком и лейблом

Лейбл работает так-же, вне зависимости от того что ещё есть в инпуте

Инпут с любым элементом слева

Если передать в pd-input именнованный слот left, то появится контент слева

p.s. Если не нравится перестройка отступа слева, то просто можно задать всему инпуту отступ слева через css. Тогда автоматический расчёт отступа не понадобится.

Элемент слева и лейбл

Элемент слева и справа

Инпут с ошибкой

Внутри себя инпут никак не реализует систему валидации. Если хочешь ошибку, передавай её текст в пропс 'error'

Документация к инпуту

PdInput работает макимально идентично нативному инпуту. Идентично работает v-model, тут можно слушать любые события и впринципе ничем не отличается от нативного инпута кроме дополнительных фишек.

Пропсы

error [String] - Сообщение об ошибке. Передал текст, ошибка есть. Не передал, ошибки нет. Никакой системы валидации в ui-kit не предусмотрено. В инпуте только предусмотрен вывод ошибки. Если нужны валидаторы, делай обёртку в рамках проекта.

label [String] - Можно передать строку и тогда вместо плейсхолдера будет отображаться лейбл который всегда будет оставаться в инпуте, даже когда там есть текст.

labelTopGap [Number] - Дефолт - 7 пикслей. Это отступ для текста сверху для инпута при появлении лейбла. Так как дизайнер может много чего придумать с лейблом, я решил не брать грех на душу и вместо того чтобы это автоматизировать, дал контроль через пропс.

mask [String] - Если передать '###-###-##' в этот пропс, то включится маска через либу vue-the-mask. Все доступные маски можно посмотреть в документации. Также автор библиотеке рекомендует всегда давать таким инпутам тип 'tel' чтобы избежать багов на андроиде.

returnMaskedValue [Boolean] - По умолчанию инпуты с маской возвращают чистые значения без символов маски. Если всё же эти символы нужны, то можно передать в этот пропс 'true'

Слоты

Есть несколько слотов. Если передать дефолтный или именованный 'right'. То он появится справа от инпута. Если передать именованный слот 'left', то он появится слева от инпута, двигая активную область.

Селекторы

Простой селект

Простой селект c инпутом

Селект со кастомными options

Селект со слотами

Селект со скрытым label

Простой селект

Селект с инпутом castom option

Заблокированный селект

Селект с ошибкой

Внутри себя селект никак не реализует систему валидации. Если хочешь ошибку, передавай её текст в пропс 'error'

Селект убирающий ошибку

Селект с ошибкой

Если нам нужно удалять ошибку при взаимодействии с селектом, добавлем для элемента @focus

Селект c кастомными значениями

Селект с кастомными значениями

Селект c кастомными значениями и поиском

Документация к селекту

PdSelect кастомный компонент который позволяет максимально удобно работать с селктом. Для работы достаточно предать v-model и массив options. Для options обязательно должны передоваться в объекте поля label и value. PdSelect позволяет полностью кастомизировать внутренее содержание options, для этого нужно использовать компонент PdOption. PdOption - предается внутрь PdSelect как слот, каждый компонент должен предавать в props labal и value.

Пропсы

options [Array] - Массив options для селекта. Каждый элемент должен быть объектом и содержать значение label и value. [{ label: 'лейбл', value: 1 }]

use-input [Boolean] - Флаг отражающий нужно ли использовать поиск по селекту. Компонент автоматически добавит инпут вместо селекта и будет фильтровать значения по label. Если мы передаем кастомные options в слотах через компонент PdOption, автоматический поиск отключается для таких компонентов нужно реализовывать поиск в самом компоненте отлавливая событие @searchValue c компонента PdSelect.

disabled [Boolean] - Флаг для блокировки селекта

error [String] - Сообщение об ошибке. Передал текст, ошибка есть. Не передал, ошибки нет. Никакой системы валидации в ui-kit не предусмотрено. В селекте только предусмотрен вывод ошибки. Если нужны валидаторы, делай обёртку в рамках проекта.

placeholder [String] - Можно передать строку и тогда вместо плейсхолдера будет отображаться лейбл который всегда будет оставаться в селекте, даже когда там есть текст.

custom-label [String] - Если значения имеет структуру { valeu: '', label: '' } в другом формате мы можем их переопределить, чтобы не менять структуру options и значения

custom-value [String] - Если значения имеет структуру { valeu: '', label: '' } в другом формате мы можем их переопределить, чтобы не менять структуру options и значения

disable-clear [Boolean] - Если селект использует инпут use-input для поиска значений и мы хоти убрать функционал отчистки инпута, нужно использовать пропс disable-clear

hide-placeholder [Boolean] - Флаг используется для того-что бы скрыть placeholder если у нас есть выбранное значение в селекте

Слоты

PdSelect может работать со слотами в одном случае. Если мы как slot передаем компоненты PdOption. PdOption - это компонент который нам позволяет создавать кастомные селекты с нужной нам версткой. Сам PdOption должен содержать 2 обязательных параметра label и value.

Чекбоксы

Малые чекбоксы

Чекбокс с галочкой

Чекбокс-переключатель

Чекбокс круглый

Большие чекбоксы

Большой чекбокс с галочкой

Большой чекбокс круглый

Неактивные чекбоксы

Чекбокс с галочкой

Чекбокс-переключатель

Чекбокс круглый

Документация к чекбоксам

В ui-kit добавлен универсальный чекбокс - PdCheckbox. Данный чекбокс не имеет своего внутреннего состояния и работает через v-model с булевым значением. Имеет в себе 2 встроенных представления в виде переключателя и чекбокса с галочкой. Можно прокидывать кастомные представления с помощью именованных слотов.

Слот mark-default - Для неактивного чекбокса.

Слот mark-active - Для Активного чекбокса

Дефолтный слот - текст слева от чекбокса

Пропсы

type [String] - Тип чекбокса. 2 представления в виде переключателя (switcher) и чекбокса с галочкой (mark - дефолт). AkCheckbox также предоставляет ещё один тип - round. Если переданы кастомные слоты mark-default или mark-active - этот пропс игнорируется.

disabled [Boolean] - позволяет заблокировать изменения чекбокса с помощью мыши или тапа. При этом изменения через v-model не блокируются.

size [String] доступен только в обёрке AkCheckbox - 2 представления big/small(default).

Заказать звонок