yb-multiselect

Select с мультивыбором

Зависимости

• yb-toggle
• yb-arrow-change
• yb-checkbox

Несколько вариантов использования

type=SimpleOption (default): обычные options

Обычные options с возможностью накликивания

type=CheckboxOption: надписи с checkbox-ами

Options c checkbox-ами

type=ColorOption: Квадраты с цветами

Options в виде цветных квадратов

Пропсы

• type - тип отображения списка
• data - набор данных для списка
• label - текст над элементом
• inputLabel - текст внутри элемента (в input-е)
• showApplyButton true/false(default) - отображать кнопку "Применить"

Формат данных для SimpleOption, CheckboxOption

data = [{
    label : "Видимый текст",
    value : 4, // значение
    isChecked : true // выбор - устанавливается автоматически
}]

Формат данных для ColorOption

data = [{
    value : #f99883, // значение, которое нарисует цвет
        Спец.значения (используются особые иконки):
        - transparent - прозрачный
        - multicolor - цветной (несколько цветов)
        - #ffffff - меняется цвет фоновой галочки выбора
    isChecked : true/false
    tooltip : "надпись при наведении" - в разработке
}]

События

• clickOption() - воспроизводится при выборе любого option
• applyButton() - воспроизводится при нажатии кнопки "Применить"
• clear() - воспроизводится при нажатии крестика (очистить всё)

Пример jsx

<Multiselect
    type="CheckboxOption"
    data={this.data}

    clickOption={this.clickOption}
    applyButton={this.applyButton}
    clear={this.clear}

    label="Внешняя надпись"
    inputLabel="Внутренняя надпись"
    showApplyButton={true}
/>