Intro
Dropdown er en generisk menykomponent som åpnes i en popover ved klikk.
Egnet til:
- Bruk på interne flater
- Kontekstmenyer
- Liste med handlinger
Eksempler
Relevante lenker
Props
Dropdown
- onSelect? ((element: MouseEvent<Element, MouseEvent>) => void)
- Handler called when an item is selected.
- closeOnSelect?boolean
- Whether the Menu closes when a selection is made.
- defaultOpen?boolean
- open? boolean
- Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.
Dropdown.Toggle
- as? React.ElementType
- OverridableComponent-api
- children ReactNode
- Button content
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- 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>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Dropdown.Menu extends HTMLDivElement
Dropdown.Menu.Item
- children ReactNode
- Content for description of the list item
- title? string
- Title for the list item
- icon? ReactNode
- className? string
- ref? Ref<HTMLLIElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Dropdown.Menu.Item extends HTMLLIElement
Dropdown.Menu.List
- children ReactNode
- Menu list content
- className? string
- ref? Ref<HTMLUListElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Dropdown.Menu.List extends HTMLUListElement
Dropdown.Menu.List.Item
- children ReactNode
- Menu item content
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Dropdown.Menu.List.Item extends HTMLButtonElement
Dropdown.Menu.GroupedList.Heading
- children ReactNode
- Heading
- className? string
- ref? Ref<HTMLDetailsElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Dropdown.Menu.GroupedList.Heading extends HTMLDetailsElement
Dropdown.Menu.GroupedList.Item
- as? React.ElementType
- OverridableComponent-api
- children ReactNode
- Menu item content
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Dropdown.Menu.GroupedList.Item extends HTMLButtonElement
Tokens
| Token | Fallback |
|---|---|
| --ac-dropdown-text | --a-text-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 |
