Scrollable Container
4.0.0
A description of this component is work in progress.
| 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. |
npm install @sj-ab/component-library.ui.scrollable-containerAdaptive design
Scroll buttons
Scroll buttons are displayed if pointer/keyboard is detected.
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.
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.
Importer av Scrollable Container
Repos med Scrollable Container
Senaste installerade version av Scrollable Container
Äldsta installerade version av Scrollable Container