VMA
5.0.29
The VMA component is a surface that is anchored to the bottom edge of the screen.
| Namn | Typ | Beskrivning |
|---|---|---|
background * | Color | The background color variant of the component |
children * | React.ReactNode | Text content children |
CloseButtonProps | { ariaLabel: unknown; onClick: unknown } | If this prop is provided, a Close button will be rendered with the specified props. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslations | DeepPartial | Override default translations with custom text. |
lang | "en" |
"sv" | Language used for internal translations. |
onClick | () => void | An option to provide an onClick handler to make the component behave as a button. If both RouterLink and onClick listener are present, the RouterLink is preferred |
RouterLink | React.ReactElement | An option to provide a valid router link element to make the component linked. Use for example NavLink from "react-router-dom" or equivalent from another routing library. If both RouterLink and onClick listener are present, the RouterLink is preferred |
npm install @sj-ab/component-library.ui.vma<VMA> är avsedd att omslutas av en <BottomBarContainer> och placeras inuti webbplatsens <header>-landmärke för att skapa rätt läsordning för skärmläsare. "alert" eller "status") så att innehållet automatiskt läses upp av skärmläsare så snart det visas eller uppdateras. Live-regionerna har en inbyggd skärmläsaretikett "Viktiga meddelanden" som kan ändras med egenskapen customTranslations.href och RouterLink för att göra VMA till en länk.