npm.io
1.2.0 • Published 6 years ago

multiselect-qa

Licence
ISC
Version
1.2.0
Deps
18
Size
64 kB
Vulns
0
Weekly
54

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

Зависимости




Несколько вариантов использования
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}
/>

Keywords