Menu
12.0.0
A menu displays a list of choices on a temporary surface.
| Namn | Typ | Beskrivning |
|---|---|---|
anchorEl | "undefined" |
Element |
PopoverVirtualElement | Ref to the element used as the Popover anchor. |
anchorOrigin | PopoverOrigin | The point on the anchor where the popover's anchorEl will attach to. |
anchorPosition | PopoverPosition | Position of the menu popup. |
anchorReference | PopoverReference | Determines which anchor prop to refer to when setting the position of the popover. |
bottomContent | ReactNode | Content to be rendered at the bottom of the menu, below the menu items. |
bottomSheetMaxHeight | MaxHeight | Height limit for the BottomSheet variant. Use with caution, as it can affect accessibility text zoom. The preferred value is calc(100% - NN px) to ensure content is not cut off during zoom. |
children | ReactNode | The children of the component. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
elevation | number | The elevation of the popover. |
id | string | A unique ID for the menu, used for WAI-ARIA and other purposes. |
lang | "sv" |
"en" | Language used for internal translations. |
LeftButtonProps | ButtonBaseOwnProps &
CommonProps &
Omit &
LinkProps | Props for the left bottom button, including a label. |
maxWidth | number | Width limit, does not apply for mobile bottom sheets. |
onClose | () => void | Callback fired when the component requests to be closed. |
open * | boolean | Controls whether the menu is open or closed. |
popoverMaxHeight | MaxHeight | Height limit for the Popover variant. Note: Must include the unit (e.g., px, rem). |
RightButtonProps | ButtonBaseOwnProps &
CommonProps &
Omit &
LinkProps | Props for the right bottom button, including a label. |
role | AriaRole | Changes the aria role of the <MenuList> component. |
showButtons | boolean | If true, the popup will display close and done buttons. |
showCloseButton | boolean | If true, the popup will display a close button in the top right corner. |
showTitle | boolean | If true, the title will be displayed at the top. |
subheading | string | A caption shown under the title. |
sx | SxProps | The system prop that allows defining system overrides as well as additional CSS styles. |
title * | string | Mandatory title used for accessibility labels. If you want the title to be visible as well, use the showTitle prop. |
topContent | ReactNode | Optional content to be rendered at the top of the menu. |
transformOrigin | PopoverOrigin | The point on the popover which will attach to the anchor's origin. |
variant | "popover" |
"automatic" |
"bottomsheet" | The variant of the menu popup to display. The "automatic" option will render based on the current device width. |
npm install @sj-ab/component-library.ui.menuKomponenten Menu strävar efter att följa designmönstret "Menu" från WAI-ARIA Authoring practices guide.
Menu använder bland annat:
role="menu" för att markera menyområdetaria-label för att sätta ett namn på menynrole="menuitem" för varje valbart alternativ i menynrole="menuitemcheckbox" för menyalternativ med kryssruta eller switchrole="menuitemradio" för menyalternativ med radioknapparia-selected="true" för menyalternativ som är valdarole="dialog" på Bottom Sheet-dialogen när Menu visas på små skärmar.När Menu stängs så flyttas fokus tillbaka till knappen som öppnade menyn. Detta sker automatiskt i komponenten och behöver oftast inte hanteras av utvecklare.