List
6.0.12
Lists are continuous, vertical indexes of text or images.
| Namn | Typ | Beskrivning |
|---|---|---|
component | ElementType | The component used for the root node. Either a string to use a HTML element or a component. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
negativeMargins | boolean | Negative horizontal margins. |
npm install @sj-ab/component-library.ui.listList presenteras som en enkel oordnad lista: <ul>
Det är möjligt att göra om listan till en ordnad lista med component="ol". Gör detta om det är viktigt för användare med skärmläsare att förstå att listalternativen har en inbördes ordning.
Det är också möjligt att eliminera list-semantiken helt och hållet med component="div" på <List> och disableLiSemantics på <ListItem>. Detta kan vara bra i dom fall där vi vill använda samma design, men där det bara finns ett alternativ och det inte är logiskt för skärmläsaranvändare att knappen ligger ensam i en lista.
En lista behöver vanligtvis inte ett eget tillgängligt namn. I vissa situationer kan det dock finnas anledning att förtydliga listans syfte med ett eget namn genom aria-label.
ListItem och ListItemButton kan i vissa fall vara i behov av anpassade fokusmarkeringar – läs mer här: Bra att veta om fokusmarkeringar.
Importer av List
Repos med List
Senaste installerade version av List
Äldsta installerade version av List
<List component="ol"><List component="div">
<ListItemButton disableLiSemantics>En knapp</ListItemButton>
</List>