Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Timeline

Oppdatert 25. august 2023Interne flaterStabil
Figma

    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

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    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

    • 1.4.4 Endring av tekststørrelse AA (uutilsynet.no)
    • 1.4.10 Dynamisk tilpasning AA (uutilsynet.no)

    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.

    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. @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

    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

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack