List
Intro
Lister brukes til å presentere innhold på en kortfattet og oversiktlig måte, for eksempel for å oppsummere hovedpoengene i en tekst.
Eksempler
<List> wrapper <ul> og <List.Item> wrapper <li>.
Du kan bruke 'as' for å endre til 'ol' (nummerert liste).
Du kan også sette en tittel på hvert element i listen.
Husk å sette aria-hidden på dekorative ikoner.
Retningslinjer
Punktliste eller nummerert liste
En punktliste brukes når det ikke er noen bestemt rekkefølge på innholdet. Hvis det er viktig at en bruker forstår grader av viktighet, et hendelsesforløp eller lignende, bør du bruke en nummerert liste.
Gjør
Unngå
Liste med ikoner
I punktlister er det mulig å bytte ut punktene med ikoner. Vær oppmerksom på at vi ikke har støtte for ikoner i nummererte lister.
Props
List
as?
- Type:
"ul" | "ol" - Default:"ul"
- Description:
size?
- Type:
"small" | "medium" | "large" - Default:"medium"
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
title?
- Deprecated:Use a "plain" <Heading> instead of `title`, Composition of smaller components preferred over smarter components.
- Type:
string - Description:
description?
- Deprecated:Use a "plain" <BodyShort> instead of `description`, Composition of smaller components preferred over smarter components.
- Type:
string - Description:
headingTag?
- Deprecated:The `title` prop gets deprecated, so this one follows suit, as it was a supplementary prop to the title.
- Type:
ElementType<any, keyof IntrinsicElements> - Default:"h3"
- Description:
List.Item
children
- Type:
ReactNode - Description:
title?
- Type:
string - Description:
icon?
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLLIElement> - Description:
Tokens
| Token | Fallback |
|---|---|
| --ac-list-marker-ul-color | --ac-list-marker-color |
| --ac-list-marker-icon-color | --ac-list-marker-color |
| --ac-list-marker-ol-color | --ac-list-marker-color |
| --ac-list-marker-color | --a-icon-default |