Sheet
6.3.14
A sheet allows some of the parent view to remain visible, helping people retain their original context as they interact with the sheet.
| Namn | Typ | Beskrivning |
|---|---|---|
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
disableAppBarMargin | boolean | Remove default spacing inside the Sheet caused by the AppBar. Useful for Sheet with hero image. |
disableFocusHeading | boolean | If true, the Sheet will not automatically focus the first heading |
height * | "auto" |
"cover" | Height "Auto" adjust sheet to fit content with a max height of 800px. "Cover" makes sheet cover screen, regardless of content. |
shouldCloseOnBackdropClick | boolean | When true, clicking the backdrop (area outside the dialog) will close it. |
width * | "medium" |
"large" | Sheet width is 664px for "medium" and 1104px for "large". |
npm install @sj-ab/component-library.ui.sheetAuto-height sheet
Adaptive design
Large-height sheet
Adaptive design
Resizable sheet
Adaptive design
Resizable sheet without backdrop
Adaptive design
WAI-ARIA
Sheet-komponenten baseras till stor del på designmönstret "Dialog (Modal)" från WAI-ARIA Authoring practices guide.
Det innebär att komponenten flyttar och begränsar användarens fokus till enbart det som finns i Sheetet när det öppnas. Användaren ska inte kunna tabba till dolt innehåll i bakgrunden, eller hitta dolt innehåll med skärmläsare.
Sheet-komponenten använder bland annat:
role="dialog"på behållaren för att berätta för hjälpmedel att det är en dialog.aria-labelpå behållaren för att ge den ett unikt namnaria-hidden="true"på allt innehåll i bakgrunden för att dölja det för skärmläsare (sker automatiskt)- Ett inbyggt "fokuslås" som loopar tangentbordsfokus inom Sheetet (sker automatiskt)
Scroll med tangentbord
Användare som navigerar med tangentbord måste kunna skrolla innehållet som visas i en Sheet. Om vi använder ett Sheet med mycket text men utan några interaktiva objekt som till exempel länkar så kan det bli ett problem, eftersom det inte finns något för användaren att fokusera på. Det går då inte att skrolla med piltangenterna.
För att lösa problemet måste vi antingen
- Undvika att ha för mycket innehåll i ett Sheet
- Se till att det finns minst ett interaktivt element i innehållet som kan fokuseras med tangentbordet
Importer av Sheet
Repos med Sheet
Senaste installerade version av Sheet
Äldsta installerade version av Sheet