### File

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

### Description

A timeline item component that represents a single event or activity within a timeline. Can display labels, dates, times, and custom content with various visual states.

### Basic Usage

Example :

    <!-- Simple timeline item -->
    <eui-timeline-item
      label="Task Completed"
      date="March 15, 2024"
      time="14:30"
      euiSuccess />

    <!-- With sublabel and custom content -->
    <eui-timeline-item
      label="Code Review"
      subLabel="Pull request #123"
      date="Today"
      euiInfo>
      <p>Reviewed changes and approved merge</p>
    </eui-timeline-item>

    <!-- Group item -->
    <eui-timeline-item
      label="Multiple Events"
      [isGroup]="true"
      euiSecondary />

### Accessibility

- Provide meaningful labels describing the event
- Use semantic color variants (euiSuccess, euiWarning, euiDanger) consistently
- Ensure date/time formats are clear and localized

### Notes

- Color variants (euiSuccess, euiInfo, euiWarning, euiDanger) indicate event status
- isGroup mode changes visual appearance for grouped events
- Alignment is inherited from parent eui-timeline component
- Custom content can be projected via ng-content

### Implements

`AfterContentInit`

### Metadata

HostDirectives | `BaseStatesDirective` Inputs : euiSecondary euiPrimary euiSuccess euiInfo euiWarning euiDanger euiVariant
selector | `eui-timeline-item`
templateUrl | `./eui-timeline-item.component.html`
styleUrl | `./eui-timeline-item.scss`

### Index

###### Properties
Public baseStatesDirective Public timelineComponent
###### Inputs
date dateStyleClass e2eAttr isGroup isLeftAligned label subLabel time timeStyleClass
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

date
Type : `string`

dateStyleClass
Type : `string`
Default value : `''`

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

isGroup
Type : `boolean`
Changes the visual appearance accordingly

isLeftAligned
Type : `boolean`
Inherited from parent timeline component

label
Type : `string`

subLabel
Type : `string`

time
Type : `string`

timeStyleClass
Type : `string`
Default value : `''`

### HostBindings

class
Type : `string`
Computes and returns the CSS classes for the timeline item

### Properties

Public baseStatesDirective
Type : `BaseStatesDirective`
Default value : `inject(BaseStatesDirective)`

Public timelineComponent
Type : `EuiTimelineComponent`
Default value : `inject(forwardRef(() => EuiTimelineComponent), { optional: true, host: true })`

### Accessors

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

# results matching ""

# No results matching ""