Timeline 组件 — sgcHTML

概览

TsgcHTMLComponent_Timeline

添加带有标题、内容和时间戳的时间线项目（或绑定数据集），调整线条和圆点，然后读取 HTML 属性。

组件类

TsgcHTMLComponent_Timeline

渲染为

Bootstrap 5 卡片 + 作用域时间线 CSS

家族

数据与表格

语言

Delphi, C++ Builder, .NET

快速入门

添加项目、设置线条样式、渲染它

推入几个带有 Title、Content 和 Timestamp 的 Items.Add 条目，设置线条和圆点大小，然后读取 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 CSS

参考

关键属性与方法

您最常使用的成员。

Items

Items 保存带有 Title、Content、Timestamp、Icon、十六进制 Color 和枚举 ColorStyle 的条目；每个条目都渲染为一张带圆点的卡片。

数据集绑定

LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField) 为每行创建一个项目；内容和时间戳字段是可选的。

线条

LineColor（十六进制）或 LineColorStyle（枚举）加上 LineWidth 控制垂直连接线。

圆点

DotSize 设置标记直径；每个项目的 Color 或 ColorStyle 填充其圆点。

时间戳

TimeColor（十六进制）或 TimeColorStyle（枚举）为每张卡片上的小时间戳标签设置样式。

输出

TimelineID 标识包装器；HTML 返回卡片以及作用域时间线 CSS。

资源

继续探索

	所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。	打开
	下载免费试用版30 天试用版附带 60.HTML 演示项目。	打开
	价格Single、Team 和 Site 授权，均含完整源代码。	打开

Timeline