KeyValueList
Opisane fakty o jednej rzeczy, takie jak dane konta albo serwera. Układ inline stawia etykiety obok wartości, gdy jest miejsce, a na telefonie układa je w stos; columns mieści więcej faktów na szerokich ekranach.
- KeyValueList
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: KeyValueList
- Name
- Ada Lovelace
- ada.lovelace@analytical-engine.example.com
- Phone
- Not set
- Role
- MaintainerSince 1 December 2026
- Open issues
- 0
- Region
- Frankfurt
- Uptime
- 41 days
- Version
2.4.1- Memory
- 3.1 of 8 GB
- Disk
- 62%Warns at 80%
- Last backup
- Today, 03:00
Noc, podgląd: KeyValueList
- Name
- Ada Lovelace
- ada.lovelace@analytical-engine.example.com
- Phone
- Not set
- Role
- MaintainerSince 1 December 2026
- Open issues
- 0
- Region
- Frankfurt
- Uptime
- 41 days
- Version
2.4.1- Memory
- 3.1 of 8 GB
- Disk
- 62%Warns at 80%
- Last backup
- Today, 03:00
Wysoki kontrast, podgląd: KeyValueList
- Name
- Ada Lovelace
- ada.lovelace@analytical-engine.example.com
- Phone
- Not set
- Role
- MaintainerSince 1 December 2026
- Open issues
- 0
- Region
- Frankfurt
- Uptime
- 41 days
- Version
2.4.1- Memory
- 3.1 of 8 GB
- Disk
- 62%Warns at 80%
- Last backup
- Today, 03:00
UżycieLink do sekcji Użycie
import { KeyValueList } from '@skribly/ui/data'<KeyValueList emptyValue="Not set" items={[
{ label: 'Email', value: user.email },
{ label: 'Plan', value: 'Team', hint: 'Renews on 1 December' }
]} />Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Lista opisów, więc każda wartość jest odczytywana razem z etykietą.
- Brakująca wartość pokazuje słowa z emptyValue zamiast pustego miejsca.
- Długie wartości, takie jak adresy e-mail, się zawijają zamiast się przepełniać, a układ podąża za szerokością własnego pola, więc układa się przy powiększeniu 400%.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.