Aksel
Komponenter / Interne

Timeline

NyOPPDATERT 27. januar 2023
GithubYarn FigmaEndringslogg

Ny

Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!

Send innspill

Tidslinjen viser perioder i en kronologisk rekkefølge. Lar deg oppsummere mye informasjon visuelt og bør bare brukes på interne flater.

Egnet til:

  • Fullskjerm-visning
  • Oversikt som viser hva som har skjedd på spesielle tidspunkt

Uegnet til:

  • Mobile grensesnitt
  • Dybdeinformasjon

Eksempler

Åpne i nytt vindu

Tilgjengelighet

Tidslinjen er kodet med WAI ARIA for å fungere med skjermleser. Vær forsiktig med å endre altfor mye funksjonelt da tidslinjen løser en veldig konkret oppgave og ikke så mye mer.

Mulig utfordringer med WCAG

Du bør være litt oppmerksom på at denne versjonen av tidslinjen ikke er dynamisk. Når du forstørrer innholdet i tidslinjen er det en risiko for at informasjon legges over hverandre.

Bruk av farger

Bruk mer enn bare farge for å kommunisere informasjon eller funksjoner. Varselfargene indikerer tydelig status på periode, men lite om hva perioden faktisk innebærer.

Minimum bredde

Tidslinjen bør ha en minimum bredde på ~800px for at innholdet fortsatt skal komme tydelig frem. Hva selve bredden faktisk vil være variere veldig basert på bruk, så kan være lurt å sjekke dette. Legg til en horisontal scroll hvis bruk gjelder mindre flater og innholdet ender opp med å overlappe.

Tastaturnavigasjon

Dersom tidslinjen har interaktive elementer som knapper må disse kunne nås med bruk av tastatur. Mulighet for ArrowUp/Down er lagt til for å lettere kunne navigere seg gjennom Tidslinjen uten å tabbe gjennom alle periodene.

KommandoInteraksjon
EnterAktiver
SpaceAktiver
ArrowUpFlytter fokus til første fokuserbare element på raden over
ArrowDownFlytter fokus til første fokuserbare element på raden under

Props

Timeline

startDate? Date
Decides startingpoint in timeline. Defaults to earliest date among the timeline periods.
endDate? Date
Decides end-date for timeline. Defaults to the latest date among the timeline periods.
direction?"left" | "right"
Decides direction which periods are sorted/displayed. "left" ascends from earliest date on left.
className? string

Timeline.Row

label string
Label for the timeline row
headingTag?"h2" | "h3" | "h4" | "h5" | "h6"
Heading level for the label e.g h2, h3...
icon? ReactNode
Icon next to label
className? string
ref? Ref<HTMLOListElement>
Timeline.Row extends HTMLOListElement

Timeline.Period

start Date
Period start date.
end Date
Period end date.
icon? ReactNode
Icon for easier visual identification.
status?"success" | "warning" | "danger" | "info" | "neutral"
Period status.
statusLabel? string
Status label for screen-readers e.g "Sykemeldt", "foreldrepermisjon"
onSelectPeriod? ((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
Callback when selecting a period.
children? ReactNode
Content displayed in Popover on click.
isActive? boolean
Visual active inidcation on period @note Make sure only one period is active at a time
className? string
ref? Ref<HTMLDivElement | HTMLButtonElement>
Timeline.Period extends HTMLDivElement | HTMLButtonElement

Timeline.Pin

date Date
Date position for the pin.
children? ReactNode
Content in Pin Popover.
ref? Ref<HTMLButtonElement>
Timeline.Pin extends HTMLButtonElement

Timeline.Zoom

className? string
ref? Ref<HTMLUListElement>
Timeline.Zoom extends HTMLUListElement

Timeline.Zoom.Button

label string
e.g 3mnd, 6mnd etc
interval "month" | "year"
Zoom interval in months or years
count number
How many units of the interval that will be applied e.g interval="month" + count={3} equals 3 months
ref? Ref<HTMLButtonElement>
Timeline.Zoom.Button extends HTMLButtonElement

Tokens

TokenFallback
--ac-timeline-row-bg--a-surface-subtle
--ac-timeline-row-active-bg--a-surface-selected
--ac-timeline-period-success-bg--a-surface-success-subtle
--ac-timeline-period-success-border--a-border-success
--ac-timeline-period-success-bg-hover--a-surface-success-subtle-hover
--ac-timeline-period-warning-bg--a-surface-warning-subtle
--ac-timeline-period-warning-border--a-border-warning
--ac-timeline-period-warning-bg-hover--a-surface-warning-subtle-hover
--ac-timeline-period-danger-bg--a-surface-danger-subtle
--ac-timeline-period-danger-border--a-border-danger
--ac-timeline-period-danger-bg-hover--a-surface-danger-subtle-hover
--ac-timeline-period-info-bg--a-surface-info-subtle
--ac-timeline-period-info-border--a-border-info
--ac-timeline-period-info-bg-hover--a-surface-info-subtle-hover
--ac-timeline-period-neutral-bg--a-bg-subtle
--ac-timeline-period-neutral-border--a-border-default
--ac-timeline-period-neutral-bg-hover--a-gray-200
--ac-timeline-period-selected-border--a-border-action-selected
--ac-timeline-pin-bg--a-surface-danger
--ac-timeline-pin-bg-hover--a-surface-danger-hover
--ac-timeline-zoom-border--a-border-default
--ac-timeline-zoom-bg--a-surface-default
--ac-timeline-zoom-bg-hover--a-surface-action-subtle-hover
--ac-timeline-zoom-selected-bg--a-surface-inverted
--ac-timeline-zoom-selected-text--a-text-on-inverted
--ac-timeline-axislabel-text--a-text-subtle

Var denne artikkelen til hjelp?