Timeline
TsgcHTMLComponent_Timeline — Delphi, C++ Builder 및 .NET에서 날짜가 지정된 이벤트의 세로형 타임라인을 색상 선 위의 카드로 렌더링합니다.
TsgcHTMLComponent_Timeline — Delphi, C++ Builder 및 .NET에서 날짜가 지정된 이벤트의 세로형 타임라인을 색상 선 위의 카드로 렌더링합니다.
제목, 콘텐츠 및 타임스탬프가 있는 타임라인 항목을 추가하고(또는 데이터셋을 바인딩하고), 선과 점을 조정한 다음, 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는 Title, Content, Timestamp, Icon, 16진수 Color 및 열거형 ColorStyle이 있는 항목을 담습니다. 각각은 점이 있는 카드로 렌더링됩니다.
LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField)는 행마다 항목 하나를 생성합니다. 콘텐츠와 타임스탬프 필드는 선택 사항입니다.
LineColor(16진수) 또는 LineColorStyle(열거형)과 LineWidth가 세로 연결선을 제어합니다.
DotSize는 마커 지름을 설정합니다. 각 항목의 Color 또는 ColorStyle이 그 점을 채웁니다.
TimeColor(16진수) 또는 TimeColorStyle(열거형)이 각 카드의 작은 타임스탬프 레이블을 스타일링합니다.
TimelineID는 래퍼를 식별합니다. HTML은 범위 지정 타임라인 CSS와 함께 카드를 반환합니다.