Инпуты

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

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

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

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

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

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

Если передать в 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', то он появится слева от инпута, двигая активную область.

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