Simpleselect
Универсальный выпадающий список
Посмотреть как работает
Может быть использован как часть более сложных компонентов
Несколько вариантов использования
type=SimpleOption (default): обычные options
Обычные options с возможностью накликивания
Несколько вариантов отображения блока (готовый вид)
typeSelect=Default (default): обычный, окантованный div-input
Блок с рамкой, внутри которого отобаражен label выбранного элемента
typeSelect=TablecellSelect: div-input без окантовки
Блок без окантовки, является (визуально) ячейкой таблицы
Подключение и использование
- Импортируем
import SimpleSelect from "yb-simpleselect";- Пример jsx
```javascript ```
Пропсы
- Array data [обязательное поле]
Данные для наполнения выпадающего списка
Формат данных: массив объектов + label - надпись для каждого блока выбора + value - значение, сохраняемое при выборе блока + isChecked=false (наполняется автоматически)
- String className (default="")
Класс для расширения стилей
- String label (default="")
Текст над элементом
- String inputLabel (default="")
Текст внутри элемента (в input-е). Это не placeholder!!
(если в данных хоть один из элементов isChecked : true, то данный параметр игнорируется)
(устанавливается первый элемент с isChecked, а если их несколько, остальные переводятся в isChecked=false)
- String placeholder (default="")
Серый текст внутри элемента
- Object activeValue (default={})
Имя:значение в объекте item, которое мы хотим установить, как выбранное
- Boolean isInvalid (default=false)
Отобразить с красной окантовкой. Требуется, например, в случае сигнализации ошибки
- String labelKey (default="")
Имя ключа в массиве данных, значение которого отобразить как надпись для каждого блока выбора
Применяется, если в массиве данных нет ключа label, и необходимо использовать другой ключ
События
- init()
воспроизводится при создании экземпляра модуля, когда в массиве данных есть элемент с isChecked=true
- clickOption(item)
воспроизводится при выборе любого option. Аргумент - item
- isChecked(item)
вызывается, когда есть выбранный item
В отличие от clickOption(), вызывается при любом выборе item, даже когда не было клика (например, когда значение установили извне, программно)