Scrollable Container

3.0.26

A description of this component is work in progress.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

children *

React.ReactNodeContent to be rendered inside the scrollable container.

customAttributes

CustomAttribute[]An array of custom attributes that can be used for testing purposes.

elevation

"undefined" | "1" | "2"The elevation of the scrollable container.

id *

stringUnique id for the scrollable container.

lang

"en" | "sv"Language used for internal translations.

listLabel *

stringThe label to describe the list inside the scrollable container. Important for accessibility.

negativeMargins

booleanAn optional prop that enables or disables negative margins. When set to true, negative margins are enabled (default behavior).

Installation

npm install @sj-ab/component-library.ui.scrollable-container

Länkar

Best practices

Example

Example of scrollable container

Example of scrollable container

Tillgänglighet

Knappar som komplement till pekgester

ScrollableContainer visar en horisontell lista med interaktiva element, som också går att skrolla i sidled med två stycken ikonknappar på sidorna.

Knapparna gör det möjligt för användare med nedsatt motorik att skrolla i listan med ett enkelt tryck utan att behöva använda svepgester, vilket för en del människor kan vara svårt.

Semantik

ScrollableContainer visas som en lista med listobjekt, följt av knappar för att scrolla till vänster och höger. 

<ul aria-label="Biljettyper">
   <li>
      <button type="button">
         <p>30 dagar</p>
      </button>
   </li>
   <li>
      <button type="button">
         <p>Interrail</p>
      </button>
   </li>
</ul>

<div>
   <button type="button" tabindex="-1" aria-label="Skrolla vänster i listan">
   </button>
</div>
<div>
   <button type="button" tabindex="-1" aria-label="Skrolla höger i listan">
   </button>
</div>

Listan går även att skrolla åt sidan med piltangenterna. Scrollknapparna har tabindex="-1" för att inte orsaka onödiga tabbsteg, men kan fortfarande användas med skärmläsare.

Change log

Statistik

  • Importer av Scrollable Container

    3

  • Repos med Scrollable Container

    10%

  • Senaste installerade version av Scrollable Container

    3.0.24

  • Äldsta installerade version av Scrollable Container

    3.0.24