Sheet

6.1.5

A sheet allows some of the parent view to remain visible, helping people retain their original context as they interact with the sheet.

Demo

NamnTypBeskrivning

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

disableAppBarMargin

booleanRemove default spacing inside the Sheet caused by the AppBar. Useful for Sheet with hero image.

disableFocusHeading

booleanIf 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.

width *

"medium" | "large"Sheet width is 664px for "medium" and 1104px for "large".

Installation

npm install @sj-ab/component-library.ui.sheet

Länkar

Best practices

Auto-height sheet

Adaptive design in Auto-height sheet

Adaptive design in Auto-height sheet

Example of Auto-height sheet

Example of Auto-height sheet

Large-height sheet

Adaptive design in Large-height sheet

Adaptive design in Large-height sheet

Example of Large-height sheet

Example of Large-height sheet

Resizable sheet

Medium detent (default) and Large detent in Resizable sheet

Medium detent (default) and Large detent in Resizable sheet

Example of Resizable sheet

Example of Resizable sheet

Resizable sheet without backdrop

Medium detent (default) and Large detent in Resizable sheet without backdrop

Medium detent (default) and Large detent in Resizable sheet without backdrop

Example of Resizable sheet without backdrop

Example of Resizable sheet without backdrop

Tillgänglighet

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-label på behållaren för att ge den ett unikt namn

  • aria-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

  1. Undvika att ha för mycket innehåll i ett Sheet

  2. Se till att det finns minst ett interaktivt element i innehållet som kan fokuseras med tangentbordet

Change log

Statistik

  • Importer av Sheet

    49
  • Repos med Sheet

    50%
  • Senaste installerade version av Sheet

    6.1.5
  • Äldsta installerade version av Sheet

    6.0.26