GithubYarnEndringslogg
Intro
Dropdown er en generisk menykomponent som åpnes i en popover ved klikk.
Egnet til å:
- Bruker-meny i header
- Liste med handlinger for en tabellrad
Har du innspill til komponenten?
Send forslagEksempler
Props
Dropdown
- onSelect? ((element: MouseEvent<Element, MouseEvent>) => void)
- Handler that is called when an item is selected.
- closeOnSelect?boolean
- Whether the Menu closes when a selection is made.
Dropdown.Toggle
- as? React.ElementType
- OverridableComponent-api
- children ReactNode
- Button content
- className? string
- ref? Ref<HTMLButtonElement>
- Dropdown.Toggle extends HTMLButtonElement
Dropdown.Menu
- children ReactNode
- Dropdown content
- onClose? (() => void)
- onClose callback
- strategy?"fixed" | "absolute"
- Popover positionion strategy
- placement? "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
- className? string
- ref? Ref<HTMLDivElement>
- Dropdown.Menu extends HTMLDivElement
Dropdown.Menu.Item
- children ReactNode
- Menu item content
- className? string
- ref? Ref<HTMLButtonElement>
- Dropdown.Menu.Item extends HTMLButtonElement
Dropdown.Menu.List
- children ReactNode
- Menu list content
- className? string
- ref? Ref<HTMLUListElement>
- Dropdown.Menu.List extends HTMLUListElement
Dropdown.Menu.List.Item
- children ReactNode
- Menu item content
- className? string
- ref? Ref<HTMLButtonElement>
- Dropdown.Menu.List.Item extends HTMLButtonElement
Dropdown.Menu.GroupedList.Heading
- children ReactNode
- Heading
- className? string
- ref? Ref<HTMLElement>
- Dropdown.Menu.GroupedList.Heading extends HTMLElement
Dropdown.Menu.GroupedList.Item
- as? React.ElementType
- OverridableComponent-api
- children ReactNode
- Menu item content
- className? string
- ref? Ref<HTMLButtonElement>
- Dropdown.Menu.GroupedList.Item extends HTMLButtonElement
Tokens
| Token | Fallback |
| --ac-dropdown-text | --a-text-default |
| --ac-dropdown-border | --a-border-default |
| --ac-dropdown-item-text | --a-text-action |
| --ac-dropdown-item-hover-bg | --a-surface-action-subtle-hover |
| --ac-dropdown-item-active-bg | --a-surface-action-active |
| --ac-dropdown-item-active-text | --a-text-on-active |
