Dropdown
Раскрывающееся меню с триггером и содержимым.
Соберите Dropdown.Trigger, Dropdown.Content и Dropdown.Item. Открытие можно контролировать через open и onOpenChange.
Живой пример
Настройки примера
Использование
import { UserCircleIcon } from '@heroicons/react/24/outline';
import { Badge, Dropdown } from '@prosazhin/pbcomponents';
<Dropdown>
<Dropdown.Trigger>Dropdown Button</Dropdown.Trigger>
<Dropdown.Content align='left'>
<Dropdown.Item
leftIcon={UserCircleIcon}
badge={<Badge color='secondary'>2</Badge>}
>
My orders
</Dropdown.Item>
<Dropdown.Item>Profile setting</Dropdown.Item>
<Dropdown.Item borderTop>Sign out</Dropdown.Item>
</Dropdown.Content>
</Dropdown>;API компонента
Составные части: Dropdown.Trigger, Dropdown.Content, Dropdown.Item.
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | ReactNode | Кнопка открытия и содержимое меню. | — |
Dropdown.Content.align | 'left' | 'right'left · right | Выравнивание меню относительно кнопки. | left |
className | string | Класс корневого элемента. | — |
wrapperClassName | string | Класс внешней обёртки. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.