Dropdown
Intro
Dropdown er en generisk menykomponent som åpnes i en popover ved klikk.
Etterhvert som ActionMenu er ute av Beta, vil komponenten bli merket som "avviklet" og på et senere tidspunkt fjernet fra systemet. Vi anbefaler derfor å ta i bruk vår nye ActionMenu-komponent om mulig.
Eksempel
Lenker
Retningslinjer
Denne komponenten egner seg best for arbeidsflater som brukes mye og ofte av brukerne. Dette er fordi den kan kreve tilvenning å forstå, og derfor egner seg dårlig på flater der brukerne bare er innom én eller to ganger, for eksempel søknadsdialoger.
Props
Dropdown
onSelect?
- Type:
((element: MouseEvent<Element, MouseEvent>) => void) - Description:
closeOnSelect?
- Type:
boolean - Default:true
- Description:
defaultOpen?
- Type:
boolean - Default:false
open?
- Type:
boolean - Description:
onOpenChange?
- Type:
((open: boolean) => void) - Description:
Dropdown.Toggle
as?
- Type:
React.ElementType - Description:
children
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description:
Dropdown.Menu
children
- Type:
ReactNode - Description:
onClose?
- Type:
(() => void) - Description:
strategy?
- Type:
"fixed" | "absolute" - Default:"absolute"
- Description:
placement?
- Type:
"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Dropdown.Menu.List
children
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLUListElement> - Description:
Dropdown.Menu.List.Item
children
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description:
Dropdown.Menu.GroupedList
children
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDListElement> - Description:
Dropdown.Menu.GroupedList.Heading
children
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDetailsElement> - Description:
Dropdown.Menu.GroupedList.Item
as?
- Type:
React.ElementType - Description:
children
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description:
Dropdown.Divider
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLHRElement> - Description:
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-hover-text | --a-text-action-hover |
| --ac-dropdown-item-active-bg | --a-surface-action-active |
| --ac-dropdown-item-active-text | --a-text-on-active |
