eui documentation
  1. Components
  2. EuiTimelineComponent

File

packages/components/eui-timeline/eui-timeline.component.ts

Description

A timeline component that displays a vertical list of events or activities in chronological order. Can be configured to align items on the left side instead of centered.

Basic Usage

Example :
<eui-timeline>
  <eui-timeline-item
    label="Project Started"
    date="Jan 15, 2024"
    time="09:00"
    euiSuccess>
  </eui-timeline-item>
  <eui-timeline-item
    label="Milestone Reached"
    date="Feb 20, 2024"
    euiInfo>
  </eui-timeline-item>
</eui-timeline>

<!-- Left-aligned timeline -->
<eui-timeline [isLeftAligned]="true">
  <eui-timeline-item label="Event 1" />
  <eui-timeline-item label="Event 2" />
</eui-timeline>

Accessibility

  • Use semantic HTML structure with proper heading levels
  • Provide clear, descriptive labels for each timeline item
  • Consider using aria-label on timeline for screen readers

Notes

  • Default layout centers items with connecting line
  • Left-aligned mode places all items on the left side
  • Timeline items inherit alignment from parent timeline

Metadata

selector eui-timeline
template 
<ng-content/>
styleUrl ./eui-timeline.scss

Index

Inputs
HostBindings
Accessors

Inputs

e2eAttr
Type : string
Default value : 'eui-timeline'
isLeftAligned
Type : boolean

When true, aligns timeline items to the left side instead of center

HostBindings

class
Type : string

Computes and returns the CSS classes for the timeline component

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the timeline component

Returns : string

results matching ""

    No results matching ""