wsender-input-dropdown

Установка

``
npm i @wsender/input-dropdown
`

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

`
data-content-script="dropdown"
data-placeholder="Выбрать страну"
data-moretext="Еще страны"
data-emptytext="Страны не найдены"
data-search-on="true|false|number"
data-search-placeholder="Найти страну"
data-search-empty="Страна не найдена">
Россия
Казахстан
Беларусь


var inputElem = document.getElementById("dropdown");
new DropDown(inputElem);

`

$3

TextBox берёт параметры из аттрибутов элемента input или textarea.

Поддерживаемые аттрибуты от HTMLSelectElement:

- required
- disabled

Кастомные параметры:

- data-fast - Количество значений в быстром доступе. По умолчанию - 0.
- data-placeholder - Текст заголовка попапа. По умолчанию - Select.
- data-moretext - Текст по умолчанию селекта с остальными значениями. По умолчанию - Other.
- data-emptytext - Текст выводимый в выпадающем списке, если элементы не добавлены. По умолчанию - Empty list.
- data-search-on - Управление поиском элементов в списке. true - всегда включён. false - всегда выключен. number - минимальное кол-во элементов для включения. По умолчанию - 15.
- data-search-placeholder - Текст выводимый на поле поиска до начала ввода. По умолчанию - Search.
- data-search-empty - Текст выводимый в выпадающем списке, если элементов не найдено. По умолчанию - Not found.

API

`
var inputElem = document.getElementById("dropdown");
const dropdown = new DropDown(inputElem);

dropdown.getValue(): string || null;
dropdown.getSelectedIndex(): number;
dropdown.getSelectedTitle(): string || null;
dropdown.validate(): boolean;
dropdown.destroy(): void;

`

События

$3

Изменение значения пользователем в результате ввода, вставки из буфера обмена или через метод setValue.

`
var inputElem = document.getElementById("dropdown");
const dropdown = new DropDown(inputElem);

dropdown.addEventListener("dropdown-change", (e: CustomEvent) => {
e.detail.dropdown // экземпляр DropDown, в котором изменено значение
e.detail.value // новое значение
e.detail.index // индекс нового значения
e.detail.title // текст нового значения
});

dropdown.onChange(handler: (e: CustomEvent) => { / process event / });
`

Стилизация

Класс рутового элемента: ws-dropdown
Класс body при открытом popup: ws-dropdown-opened

Субклассы состояний:

- empty - пустой селект
- fast - наличие значений в быстром доступе (data-fast > 0)
- select - отображение как select (data-fast == 0)
- noother - без выпадашки (data-fast >= кол-во значений)
- expanded - развернуть выпадашку
- invalid - невалидное значение
- searchable - включен поиск по элементам в popup
- required - обязателен для заполнения
- readonly - обязателен для заполнения
- disabled - обязателен для заполнения

$3

Миниатюра позволяет до создания экземпляра DropDown сохранить высоту и занимаемую область, чтобы после создания DropDown вёрстка не прыгала.

Для отображения миниатюры к тегу select добавьте класс ws-dropdown-input. А сразу под тегом создайте элемент с классом ws-dropdown-miniature.

`

``

Если вам нужно стилизовать миниатюру, то применяйте стили к ws-dropdown-miniature.

Show more