Dropdown

import { Dropdown } from '@megafon/ui-core';

Использование с Select

Пример использования Dropdown с компонентом Select для создания выпадающего списка с выбором значения.

<SelectContent />

Использование с Search

Пример использования Dropdown с компонентом Search для поиска и фильтрации элементов.

Показать код

<SearchContent />

Использование с Chips

Пример использования Dropdown с компонентом Chips для выбора опций.

Показать код

<ChipsContent />

Prop name	Type	Default	Description
items	DropdownItemType<T>[]	[]	Массив элементов
value	string \| number \| undefined		Текущее выбранное значение
filterValue	string \| undefined		Текущее поисковое значение
isOpen	boolean \| undefined	false	Состояние открытости выпадающего списка
targetRef*	RefObject<HTMLElement>		Реф элемента, к которому привязывается дропдаун
hoveredIndex	number \| undefined		Индекс выделенного элемента
emptyText	string \| undefined	Нет элементов	Текст при отсутствии элементов
headerContent	ReactNode		Контент, отображаемый в шапке дропдауна
disabled	boolean \| undefined	false	Отключение компонента
short	boolean \| undefined	false	Отображать короткий выпадающий список
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; list?: string \| undefined; item?: string \| undefined; } \| undefined	{}	Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; list?: Record<string, string> \| undefined; item?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты
onItemClick	((index: number) => (e: MouseEvent<Element, MouseEvent> \| KeyboardEvent<Element>) => void) \| undefined		Обработчик выбора элемента
onClose	(() => void) \| undefined		Обработчик закрытия списка