App Bar
8.3.3
The App Bar provides content and actions related to the current screen. It’s used for navigation, screen titles and actions.
| Namn | Typ | Beskrivning |
|---|---|---|
actionButtons | unknown | Action buttons located on the right side of the AppBar. |
color | "black" |
"white" | Configure the title and icons to appear in either white or black. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customRightContent | ReactElement | Custom content on the right side of the AppBar. |
dense | boolean | Make App Bar height 56 instead of 72. Dense is true by default on breakpoints below sm. |
elevation | "undefined" |
"1" |
"2" | Elevation of the AppBar. Used primarily in dark mode to handle modals and layers |
headingRef | RefObject | Assign a reference to the heading to use it as the scroll target for determining when to display the title within the appbar. |
hideOnScrollDown | boolean | Hide App Bar when scrolling down. |
isOnImage | boolean | Display the AppBar with a gradient overlay and white text to ensure good contrast. |
navigationButtons | NavigationButtonProps | Navigation buttons. |
scrimHeight | number | Height of the overlay scrim in pixels. Default is 125px. |
scrollTarget | HTMLElement | Specify an element to serve as the scroll target. Expects a DOM node. |
sx | SxProps | The system prop that allows defining system overrides as well as additional CSS styles. |
title * | string | Title for elevated AppBar. |
toolBarSx | SxProps | The system prop that allows defining system overrides as well as additional CSS styles for toolbar. |
npm install @sj-ab/component-library.ui.app-barNavigation Button
None
Back
Back + Cancel (only for modals)
Back + Close (only for modals)
Cancel (only for modals)
Close (only for modals)
Minimize (only for modals)
Menu (only for tablet & desktop)
Menu + Back (only for tablet & desktop)
Elevation
Resting (default)
Elevated (when content scrolls behind it)
Elevated Prominent (when content scrolls behind it)
Navigation Drawer, Option 1
When the user taps the Menu button in the App Bar, a modal Navigation Drawer is pushed from the leading edge. The user can collapse the menu by tapping the Close button, drag the menu to the left or tap anywhere outside the menu.
Navigation Drawer, Option 2
When the user taps the Menu button in the App Bar, an inline Navigation Drawer is pushed from the leading edge. The user can collapse the menu by tapping the Close button or drag the menu to the left. Use this option only if the content area is large enough.
Navigation Drawer, Option 3
An inline Navigation Drawer is displayed from the start. The user can collapse the menu by tapping the Close button or drag the menu to the left. Use this option only if the content area is large enough.
Semantik
AppBarens behållare renderas som ett navigationselement (<nav>). Detta eftersom att AppBar allra oftast kommer att innehålla någon typ av navigation, t.ex. en tillbakaknapp eller en stängknapp.
Rubriken i AppBar är dold för skärmläsare med aria-hidden eftersom det alltid kommer att finnas en annan likadan rubrik på sidan och vi vill bibehålla en korrekt rubrikstruktur.
Textförstoring och responsivitet
AppBar är byggd för att vara robust och klara olika grader av förstoring på skärmar av varierande storlek.
När det finns plats kommer knapparna i AppBar renderas som TextButton med både ikon och text. Men på små skärmar så visas de istället som IconButton för att spara utrymme.
Rubriken i AppBar kortas ner med ellipsis när det saknas plats, så att rubriken inte går över på två rader. Detta är ett medvetet avsteg från WCAG-kravet 1.4.4 Resize text (AA), motiverat med att samma rubrik alltid kommer finnas på sidan utanför AppBar och där kan förstoras.
Importer av App Bar
Repos med App Bar
Senaste installerade version av App Bar
Äldsta installerade version av App Bar