List
5.2.3
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.listStart Adornment
None
Icon
Avatar 24x24
Avatar 40x40
Language
Payment Method
Thumbnail 1/1
Thumbnail 3/2
Checkbox
Radio
Detail
None
Text
Payment Method
Price Object
End Adornment
None
Icon Button
Text Button
Checkbox
Checkmark
Chevron
Radio
Stepper
Switch
Supporting Content
None
Slot
Semantik
List 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.
Tillgängligt namn
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.
Fokusmarkeringar
ListItem och ListItemButton kan i vissa fall vara i behov av anpassade fokusmarkeringar – läs mer här: Bra att veta om fokusmarkeringar.