Menu
11.2.16
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.menuWAI-ARIA
Komponenten 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-labelfö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.
Återfokusering
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.
- EnterVälj markerat menyval
- Pil nedGå till nästa menyval
- Pil uppGå till föregående menyval
Fix overwritten MenuItem SxProps and keyboard navigation in FilterRow
11.2.10Updates design tokens with new border radii and updates border radii on all components.
11.2.0Fix for DateCalendar when used in narrow areas.
11.1.20Fixes Menu maxWidth issue.
11.1.16Only pass properties to supported child elements
11.1.10
Importer av Menu
Repos med Menu
Senaste installerade version av Menu
Äldsta installerade version av Menu