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、16 進数の Color、列挙型の ColorStyle を持つエントリを保持します。各エントリは点付きのカードとしてレンダリングされます。

Dataset binding

LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField) は、各行ごとに 1 項目を作成します。内容とタイムスタンプのフィールドは任意です。

Line

LineColor（16 進数）または LineColorStyle（列挙型）に加え、LineWidth が垂直のコネクターを制御します。

Dots

DotSize はマーカーの直径を設定します。各項目の Color または ColorStyle がその点を塗りつぶします。

Timestamps

TimeColor（16 進数）または TimeColorStyle（列挙型）が、各カードの小さなタイムスタンプラベルのスタイルを設定します。

Output

TimelineID はラッパーを識別します。HTML は、スコープ付きのタイムライン CSS とともにカードを返します。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

Timeline