UI dropdown component
npm install @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);
`
TextBox берёт параметры из аттрибутов элемента input или textarea.
Поддерживаемые аттрибуты от HTMLSelectElement:
- required
- disabled
Кастомные параметры:
- data-fast - Количество значений в быстром доступе. По умолчанию - 0.Select
- data-placeholder - Текст заголовка попапа. По умолчанию - .Other
- data-moretext - Текст по умолчанию селекта с остальными значениями. По умолчанию - .Empty list
- data-emptytext - Текст выводимый в выпадающем списке, если элементы не добавлены. По умолчанию - .true
- data-search-on - Управление поиском элементов в списке. - всегда включён. false - всегда выключен. number - минимальное кол-во элементов для включения. По умолчанию - 15.Search
- data-search-placeholder - Текст выводимый на поле поиска до начала ввода. По умолчанию - .Not found
- data-search-empty - Текст выводимый в выпадающем списке, если элементов не найдено. По умолчанию - .
`
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;
`
Изменение значения пользователем в результате ввода, вставки из буфера обмена или через метод 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
`
Класс рутового элемента: 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 - обязателен для заполнения
Миниатюра позволяет до создания экземпляра DropDown сохранить высоту и занимаемую область, чтобы после создания DropDown вёрстка не прыгала.
Для отображения миниатюры к тегу select добавьте класс ws-dropdown-input. А сразу под тегом создайте элемент с классом ws-dropdown-miniature.
```
Если вам нужно стилизовать миниатюру, то применяйте стили к ws-dropdown-miniature.