chrome:shell.skip
chrome:nav.docs chrome:nav.cdk chrome:nav.components blocks:nav.blocks chrome:nav.tools chrome:nav.contribute chrome:nav.about
generated:catalog.area.components
generated:catalog.entry.progress.title generated:catalog.entry.skeleton.title generated:catalog.entry.spinner.title generated:catalog.entry.empty-state.title generated:catalog.entry.icon.title generated:catalog.entry.avatar.title generated:catalog.entry.badge.title generated:catalog.entry.chip.title generated:catalog.entry.code.title generated:catalog.entry.list.title generated:catalog.entry.table.title generated:catalog.entry.tree.title generated:catalog.entry.timeline.title generated:catalog.entry.chart.title generated:catalog.entry.kbd.title

generated:catalog.entry.timeline.title

generated:catalog.entry.timeline.description

@xngui/components/timeline
@xngui/components/timeline

chrome:demo.section

chrome:demo.preview

  • Order placed

    Confirmed and payment captured.

  • demo-preview:timeline.shipped

    Carrier: DHL · Tracking #48291

  • demo-preview:timeline.out-for-delivery

    Estimated arrival between 10:00–14:00.

  • demo-preview:timeline.delivered

    demo-preview:timeline.pending
demo-preview:hints.category.assistive:
TipSR
import { Component } from '@angular/core';
import { XTimeline, XTimelineItem } from '@xngui/components/timeline';
 
@Component({
selector: 'app-example',
imports: [XTimeline, XTimelineItem],
templateUrl: './timeline.component.html',
})
export class ExampleComponent {}

chrome:demo.events.title

chrome:demo.events.empty

chrome:demo.api.title

x-timeline

chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
orientation
XOrientation
'vertical'
Layout direction for the timeline rail and items.
size
XSize
—
Visual size tier — falls back to XConfigService when unset.
density
XDensity
—
Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.