Intro
Tidslinjen viser perioder i en kronologisk rekkefølge. Lar deg oppsummere mye informasjon visuelt og bør bare brukes på interne flater.
Egnet til:
- Bruk på interne flater
- Fullskjerm-visning
- Oversikt som viser hva som har skjedd på spesielle tidspunkt
Uegnet til:
- Mobile grensesnitt
- Dybdeinformasjon
Eksempler
Lar deg 'zoome' til predefinerte tidsperioder. Bruk 'startDate/endDate'-prop i Timeline for å justere hvilken tidsperiode som blir vist.
Vi anbefaler å bruke 'aria-controls' begge veier mellom aktive perioder og panelet det refererer til. Dette gir brukere av enkelte skjermlesere keyboard-shortcuts for å hoppe mellom perioder og panelet.
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.
Tastaturinteraksjon
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.
| Kommando | Interaksjon |
|---|---|
| Enter | Aktiver |
| Space | Aktiver |
| ArrowUp | Flytter fokus til første fokuserbare element på raden over |
| ArrowDown | Flytter 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. @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
- endDate? Date
- Decides end-date for timeline. Defaults to the latest date among the timeline periods. @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
- direction?"left" | "right"
- Decides direction which periods are sorted/displayed. "left" ascends from earliest date on left.
- axisLabelTemplates? AxisLabelTemplates
- Templates for label texts. The templates are passed to the date-fns `format` function. Defaults to { day: "dd.MM", month: "MMM yy", year: "yyyy" }.
- 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>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- 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>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Timeline.Period extends HTMLDivElement | HTMLButtonElement
Timeline.Pin
- date Date
- Date position for the pin.
- children? ReactNode
- Content in Pin Popover.
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Timeline.Pin extends HTMLButtonElement
Timeline.Zoom
- className? string
- ref? Ref<HTMLUListElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- 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>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Timeline.Zoom.Button extends HTMLButtonElement
Tokens
| Token | Fallback |
|---|---|
| --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 |