Aksel

Meny

Timeline

Oppdatert Interne flaterStabil
GithubYarn FigmaEndringslogg

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 over hva som har skjedd i bestemte perioder

Uegnet til:

  • Mobile grensesnitt

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 propen statusLabel.

Minimum bredde

Avhengig av hvilken tidsperiode som blir vist (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

Tastaturinteraksjon

Mulighet for bruk av pil opp/ned 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.

Mulige utfordringer med WCAG

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

Props

Timeline

startDate?

  • Type:
    Date
  • Description:

endDate?

  • Type:
    Date
  • Description:

direction?

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

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

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

data-color?

  • Type:
    (string & {}) | AkselColor

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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

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

Timeline.Pin

date

  • Type:
    Date
  • Description:

children?

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

Timeline.Zoom

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

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.