@yandex/ui

Version:

Yandex UI components

37 lines (27 loc) • 6.72 kB

Markdown

# Dropdown <a href='https://github.yandex-team.ru/search-interfaces/frontend/tree/master/packages/lego-components/src/Dropdown' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Исходники]/[Github ][green]/badge.svg' /></a> <a href='https://search.yandex-team.ru/stsearch?text=Dropdown.ts&facet.queue=ISL&facet.type=bug&facet.status=128' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Известные проблемы]/[Startrek][blue]/badge.svg' /></a>  Компонент для создания выпадающего списка  {{%story::desktop:surface-dropdown-desktop--common%}} {{%story::desktop:surface-dropdown-desktop--directions%}} {{%story::desktop:surface-dropdown-desktop--split%}} {{%story::desktop:surface-dropdown-desktop--tail%}} {{%story::desktop:surface-dropdown-desktop--arrow%}}  | Свойство | Тип | По умолчанию | Описание | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | --------------------------------------------------- | | visible | `false \| true` | — | Делает попап видимым | | children | `ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)>` | — | Элемент триггер, например, Link или Button | | content | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal \| (props: { tailRef?: Ref<HTMLDivElement>; }) => ReactNode` | — | Содержимое попапа | | style? | `CSSProperties` | — | Html атрибут `style` | | direction? | `"bottom-left" \| "bottom-center" \| "bottom-right" \| "top-left" \| "top-center" \| "top-right" \| "right-top" \| "right-center" \| "right-bottom" \| "left-top" \| "left-center" \| "left-bottom" \| Direction[]` | — | Направление раскрытия попапа | | trigger | `"click" \| "hover" \| "focus" \| TriggerType[]` | — | Действие вызывающее показ попапа | | onVisibleChange | `(visible: boolean) => void` | — | Обработчик на изменение видимости попапа | | mouseEnterDelay | `number` | `0` | Временная задержка (секунды) на появление попапа | | mouseLeaveDelay | `number` | `0.1` | Временная задержка (секунды) на исчезновение попапа | | focusDelay | `number` | `0` | Временная задержка (секунды) на появление попапа | | blurDelay | `number` | `0.15` | Временная задержка (секунды) на исчезновение попапа |  Остальные пропсы напрямую проксируются в попап.