Scrollable Container

4.0.0

A description of this component is work in progress.

Demo

Props

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

Namn	Typ	Beskrivning
children *	`React.ReactNode`	Content to be rendered inside the scrollable container.
childrenAreChips	`boolean`	Set this flag to true if the contents are Chips.
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 *	`string`	Unique id for the scrollable container.
itemsPerPage	`"1" \| "2" \| "3" \| "4"`	The number of items to show per page.
lang	`"en" \| "sv"`	Language used for internal translations.
listLabel *	`string`	The label to describe the list inside the scrollable container. Important for accessibility.
negativeMargins	`boolean`	An optional prop that enables or disables negative margins. When set to true, negative margins are enabled (default behavior). Useful if you want a "full bleed" layout.

Installation

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

Länkar

Best practices

Adaptive design

Scroll buttons

Scroll buttons are displayed if pointer/keyboard is detected.

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

Repos med Scrollable Container

Senaste installerade version av Scrollable Container

3.3.9

Äldsta installerade version av Scrollable Container

3.3.9