DropdownPanel
DropdownPanel — выпадающая панель, открывающаяся кликом по своему триггеру. В отличие от DropdownMenu не ограничена списком пунктов: внутрь через children кладётся произвольная вёрстка — карточка профиля, список сущностей, смешанный контент. Пункты-действия внутри собираются из MenuItemButton (@tulls/ui) — тот же вид пункта, что и в меню, но без машины Ark Menu. Триггер задаёт потребитель через trigger — это любой элемент (кнопка, иконка, аватар), на который Ark через asChild вешает onClick и aria-атрибуты. Открытость по умолчанию панель держит сама; когда открытием распоряжается хост — контролируемо парой open / onOpenChange. Положение относительно триггера настраивает positioning (по умолчанию bottom-start). Панель порталится в body, монтируется лениво при открытии и размонтируется при закрытии. Родня: DropdownMenu — та же механика открытия, но контент строго список пунктов; MenuItemButton — одиночный пункт того же вида, из которого набирается меню внутри панели.
Анатомия
Примеры
Произвольный контент
Главное отличие от DropdownMenu: внутрь children идёт любая вёрстка, а не только пункты. Здесь сверху карточка профиля, ниже разделитель и пункты-действия из MenuItemButton.
Позиционирование
positioning пробрасывается в Ark Popover: placement задаёт сторону и выравнивание (bottom-end, top-start, ...), gutter — отступ от триггера. По умолчанию — bottom-start.
Контролируемое открытие
Пара open / onOpenChange передаёт управление хосту: панель открывают и закрывают извне. onOpenChange срабатывает на любое закрытие — включая Esc и клик вне панели.
API
| Prop | Type | Default |
|---|---|---|
trigger*Элемент-триггер, открывающий панель по клику, — задаётся потребителем (кнопка, иконка и т.п.). Ark навешивает на него onClick/aria через asChild. | ReactElement | - |
openКонтролируемая открытость: без пропа панель управляет состоянием сама | boolean | - |
onOpenChangeКолбэк изменения открытости — вызывается на любое открытие/закрытие, включая Esc и клик вне панели | (open: boolean) => void | - |
positioningПозиционирование относительно триггера | ComponentProps<typeof ArkPopover.Root>["positioning"] | { placement: "bottom-start" } |
children*Произвольный контент панели | ReactNode | - |