File
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
Index
Properties
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
Accessors
|
|
|
|
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
|
|
timeStyleClass
|
Type : string
|
Default value : ''
|
HostBindings
|
class
|
Type : string
|
Computes and returns the CSS classes for the timeline item
|
|
Public
baseStatesDirective
|
Type : BaseStatesDirective
|
Default value : inject(BaseStatesDirective)
|
|
Public
timelineComponent
|
Type : EuiTimelineComponent
|
Default value : inject(forwardRef(() => EuiTimelineComponent), { optional: true, host: true })
|
Accessors
|
cssClasses
|
getcssClasses()
|
Computes and returns the CSS classes for the timeline item
|