Komponenter
Process
Process brukes til å vise en liste med hendelser. Hver hendelse kan inneholde informasjon, handlinger, lenker eller status.
Ny funksjon
Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!
Egnet til:
- Vise en prosess med flere steg.
- Vise gangen i en sak.
Uegnet til:
- Vise fremdrift i utfylling av et skjema (bruk FormProgress eller Stepper).
Eksempler
Retningslinjer
Hva er forskjellen mellom Stepper og Process?
Process brukes når fremdriften ikke kan styres av brukeren, for eksempel for å vise gangen i en sak. I Process kan du legge til interaktivt innhold.
Stepper brukes når brukeren selv kan navigere mellom stegene, for eksempel i et skjema. I Stepper kan du ikke legge til interaktivt innhold, siden stegene i seg selv er klikkbare.
Tilgjengelighet
Process rendres som et <ol>-element der aria-controls er satt til ID-en til den aktive hendelsen. Dette gjør at de som bruker Jaws kan hoppe fram/tilbake med hurtigtasten Alt+Jaws+M. Jaws er enten Insert eller CapsLock, avhengig av hvilket tastaturoppsett som er valgt i Jaws.
Figma
I Figma kommer komponenten som enkeltsteg, som du setter sammen til en Process ved hjelp av autolayout med vertical flow og -8px i gap.
Props
Process
children
- Type:
ReactElement<ForwardRefExoticComponent<ProcessEventProps & RefAttributes<HTMLLIElement>>, string | JSXElementConstructor<...>>[] - Description:
<Process.Event />elements.
hideStatusText?
- Type:
boolean - Default:
false - Description:
Hides the "aktiv"-text when the event is active.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLOListElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Process.Event
children?
- Type:
ReactNode - Description:
Rich content to display under the title and timestamp if provided.
hideContent?
- Type:
boolean - Description:
Hide the content section of the event.
title?
- Type:
string - Description:
Step title.
timestamp?
- Type:
string - Description:
Timestamp or date to display for event.
bullet?
- Type:
ReactNode - Description:
Icon or number to display inside the bullet.
status?
- Type:
"active" | "completed" | "uncompleted" - Default:
"uncompleted" - Description:
Current event status.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLLIElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs