GithubYarn FigmaEndringslogg
Intro
Egnet til:
- 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.
Tilgjengelighet
Mulig utfordringer med WCAG
Bruk av farger
Minimum bredde
Tastaturnavigasjon
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.
- 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
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 |