Timeline
TsgcHTMLComponent_Timeline — render a vertical timeline of dated events as cards on a coloured line, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_Timeline — render a vertical timeline of dated events as cards on a coloured line, in Delphi, C++ Builder and .NET.
Add timeline items with a title, content and timestamp (or bind a dataset), tune the line and dots, then read the HTML property.
TsgcHTMLComponent_Timeline
Bootstrap 5 cards + scoped timeline CSS
Delphi, C++ Builder, .NET
Push a few Items.Add entries with a Title, Content and Timestamp, set the line and dot size, then read HTML.
uses
sgcHTML_Component_Timeline;
var
oTimeline: TsgcHTMLComponent_Timeline;
oItem: TsgcHTMLTimelineItem;
begin
oTimeline := TsgcHTMLComponent_Timeline.Create(nil);
try
oTimeline.LineWidth := 2;
oTimeline.DotSize := 18;
oItem := oTimeline.Items.Add;
oItem.Timestamp := '09:30';
oItem.Title := 'Order placed';
oItem.Content := 'Payment confirmed.';
oItem.Color := '#7C3AED';
WebModule.Response := oTimeline.HTML; // cards + scoped CSS
finally
oTimeline.Free;
end;
end;
// Or bind it straight to a dataset:
oTimeline.LoadFromDataSet(qryLog, 'Event', 'Detail', 'LoggedAt');// includes: sgcHTML_Component_Timeline.hpp
TsgcHTMLComponent_Timeline *oTimeline = new TsgcHTMLComponent_Timeline(NULL);
try
{
oTimeline->LineWidth = 2;
oTimeline->DotSize = 18;
TsgcHTMLTimelineItem *oItem = oTimeline->Items->Add();
oItem->Timestamp = "09:30";
oItem->Title = "Order placed";
oItem->Content = "Payment confirmed.";
oItem->Color = "#7C3AED";
String html = oTimeline->HTML; // cards + scoped CSS
}
__finally
{
delete oTimeline;
}using esegece.sgcWebSockets;
var timeline = new TsgcHTMLComponent_Timeline();
timeline.LineWidth = 2;
timeline.DotSize = 18;
var item = timeline.Items.Add();
item.Timestamp = "09:30";
item.Title = "Order placed";
item.Content = "Payment confirmed.";
item.Color = "#7C3AED";
string html = timeline.HTML; // cards + scoped CSSThe members you reach for most often.
Items holds entries with Title, Content, Timestamp, Icon, hex Color and enum ColorStyle; each renders as a dotted card.
LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField) creates one item per row; content and timestamp fields are optional.
LineColor (hex) or LineColorStyle (enum) plus LineWidth control the vertical connector.
DotSize sets the marker diameter; each item's Color or ColorStyle fills its dot.
TimeColor (hex) or TimeColorStyle (enum) style the small timestamp label on each card.
TimelineID identifies the wrapper; HTML returns the cards together with the scoped timeline CSS.