### 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

- e2eAttr
- isLeftAligned

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-timeline'`

isLeftAligned
Type : `boolean`

### HostBindings

class
Type : `string`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the timeline component Returns : `string`

# results matching ""

# No results matching ""