Aksel

Meny

Timeline

Oppdatert Interne flaterStabil
Figma

Intro

Tidslinjen gir en visuell oversikt over perioder i kronologisk rekkefølge. Periodene kan gjøres klikkbare, slik at du kan vise utfyllende informasjon. Tidslinjen fungerer ikke på mobil, og skal bare brukes på interne flater.

Egnet til:

  • Bruk på interne flater
  • Fullskjermvisning
  • Oversikt som viser hva som har skjedd på bestemte tidspunkt

Uegnet til:

  • Mobile grensesnitt
  • Utdypende informasjon

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Retningslinjer

Bruk av ikoner og farger

Bruk ikon, som eksemplene viser, for å kommunisere type periode. Komponenten kommer med 5 innebygde statuser som bestemmer farge og tilgjengelig tekst:

StatusFargeTilgjengelig tekst
success--a-surface-success-subtleSuksess fra ${start} til ${end}
warning--a-surface-warning-subtleAdvarsel fra ${start} til ${end}
danger--a-surface-danger-subtleFare fra ${start} til ${end}
info--a-surface-info-subtleInfo fra ${start} til ${end}
neutral--a-bg-subtleNøytral fra ${start} til ${end}

Du kan overskrive statusen i den tilgjengelige teksten ved å bruke av propen statusLabel.

Minimum bredde

Avhengig av dato-oppløsning (startDate/endDate) og antall perioder vil komponenten kreve en viss bredde for at innholdet skal komme tydelig frem. Vær forsiktig med å legge inn for mange perioder, og vurder å legge til horisontal stegvis skroll.

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.

Mulige utfordringer med WCAG

Vær oppmerksom på at komponenten ikke er responsiv.

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.

Interaksjon med skjermleser

Hvis aria-controls er satt på en periode i tidslinja og panelet, kan de som bruker Jaws hoppe fram/tilbake med hurtigtasten Alt+Jaws+m. Jaws er enten Insert eller CapsLock, avhengig av hvilket tastaturoppsett som er valgt i Jaws.

Props

Timeline

startDate?

  • Type:
    Date
  • Description:

endDate?

  • Type:
    Date
  • Description:

direction?

  • Type:
    "left" | "right"
  • Default:
    "left"
  • Description:

className?

  • Type:
    string

axisLabelTemplates?

  • Deprecated:
    Use `<Provider />`-component
  • Type:
    AxisLabelTemplates
  • Description:

Timeline.Row

label

  • Type:
    string
  • Description:

headingTag?

  • Type:
    "h2" | "h3" | "h4" | "h5" | "h6"
  • Default:
    "h3"
  • Description:

icon?

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLOListElement>
  • Description:

Timeline.Period

start

  • Type:
    Date
  • Description:

end

  • Type:
    Date
  • Description:

icon?

  • Type:
    ReactNode
  • Description:

status?

  • Type:
    "success" | "warning" | "danger" | "info" | "neutral"
  • Default:
    "neutral"
  • Description:

statusLabel?

  • Type:
    string
  • Description:

onSelectPeriod?

  • Type:
    ((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
  • Description:

children?

  • Type:
    ReactNode
  • Description:

isActive?

  • Type:
    boolean
  • Description:

placement?

  • Type:
    "top" | "bottom"
  • Default:
    "top"
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement | HTMLButtonElement>
  • Description:

Timeline.Pin

date

  • Type:
    Date
  • Description:

children?

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

Timeline.Zoom

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLUListElement>
  • Description:

Timeline.Zoom.Button

label

  • Type:
    string
  • Description:

interval

  • Type:
    "month" | "year"
  • Description:

count

  • Type:
    number
  • Description:

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.