@eisgs/dropdown-multiple
v1.1.14
Published
**DEPRECATED**
Downloads
29
Readme
DEPRECATED
Весь функционал переехал в компонент Dropdown
. Данный компонент поддерживаться не будет.
Базовый Dropdown
label
, labelHint
и placeholder
позволяют показывать дополнительную информацию пользователю.
withSearch
, searchPlaceholder
и onSearch
позволяют управлять поиском среди опций.
renderPlaceholder
обязательное поле для показа информации о том, сколько элементов выбрано.
clearable
очистка поля по кнопке
const [values, setValues] = React.useState([]);
const options = [
{ label: 'Опция 1', value: '1' },
{ label: 'Опция 2', value: '2' },
{ label: 'Опция 3', value: '3' }
];
<DropdownMultiple
label="Имя поля"
labelHint="Подсказка"
placeholder="Заполните поле"
values={values}
options={options}
onChange={setValues}
clearable
withSearch
searchPlaceholder="Поиск"
renderPlaceholder={(count) => <div>Выбрано: {count}</div>}
/>
disabled и Валидация
disabled
- заблокированное состояние.
const options = [
{ id: 1, label: 'Опция 1', value: '1' },
{ id: 2, label: 'Опция 2', value: '2' },
{ id: 3, label: 'Опция 3', value: '3' }
];
<>
<div style={{ marginBottom: "20px" }}>
<DropdownMultiple disabled options={options} />
</div>
</>
Список выбранных значений
Для отображения списка выбранных значений над компонентом Dropdown
необходимо передать флаг
withSelectedControlList
.
const [values, setValues] = React.useState([]);
const options = [
{ label: 'Опция 1', value: '1' },
{ label: 'Опция 2', value: '2' },
{ label: 'Опция 3', value: '3' }
];
<div style={{ width: '300px' }}>
<DropdownMultiple
withSelectedControlList
label="Имя поля"
labelHint="Подсказка"
placeholder="Заполните поле"
values={values}
options={options}
onChange={setValues}
clearable
withSearch
searchPlaceholder="Поиск"
renderPlaceholder={(count) => <div>Выбрано: {count}</div>}
/>
</div>