← Back to Index

TFlexFMXTimeline

Vertical or horizontal timeline component for displaying chronological events with icons and descriptions.

Key Properties

Items: TTimelineItems
Collection of timeline event items.
Orientation: TOrientation
Layout: Vertical or Horizontal.
LineColor: TAlphaColor
Timeline connector line color.
LineWidth: Single
Timeline line thickness.
IconSize: Single
Size of event icons/markers.
ItemSpacing: Single
Space between timeline items.
AlternateAlignment: Boolean
Alternate items left/right (vertical) or top/bottom (horizontal).

Timeline Item Properties

Title: string
Event title/heading.
Description: string
Event details text.
DateTime: TDateTime
Event date and time.
IconName: string
Icon identifier or emoji.
IconColor: TAlphaColor
Icon/marker color.
CustomData: TObject
Optional custom data object.

Usage Examples

Vertical Timeline

Timeline1.Orientation := Vertical;
Timeline1.LineColor := TAlphaColors.Lightgray;

with Timeline1.Items.Add do
begin
  Title := 'Project Started';
  Description := 'Initial planning phase';
  DateTime := EncodeDate(2024, 1, 15);
  IconName := '🚀';
  IconColor := TAlphaColors.Blue;
end;

with Timeline1.Items.Add do
begin
  Title := 'Development';
  Description := 'Core features implemented';
  DateTime := EncodeDate(2024, 3, 1);
  IconName := '⚙️';
  IconColor := TAlphaColors.Orange;
end;

with Timeline1.Items.Add do
begin
  Title := 'Launch';
  Description := 'Product released to public';
  DateTime := EncodeDate(2024, 6, 1);
  IconName := '🎉';
  IconColor := TAlphaColors.Green;
end;

Order History

Timeline1.Orientation := Vertical;

with Timeline1.Items.Add do
begin
  Title := 'Order Placed';
  Description := 'Order #12345';
  DateTime := Now - 2;
  IconName := '📦';
end;

with Timeline1.Items.Add do
begin
  Title := 'Shipped';
  Description := 'Package sent via UPS';
  DateTime := Now - 1;
  IconName := '🚚';
end;

with Timeline1.Items.Add do
begin
  Title := 'Delivered';
  Description := 'Signed by recipient';
  DateTime := Now;
  IconName := '✅';
end;

Horizontal Timeline

Timeline1.Orientation := Horizontal;
Timeline1.Height := 120;
// Add events similar to above

Methods

Events

Notes

← Back to Index