Timeline

TsgcHTMLComponent_Timeline — erzeugen Sie eine vertikale Zeitleiste aus datierten Ereignissen als Karten auf einer farbigen Linie, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_Timeline

Fügen Sie Zeitleisten-Elemente mit Titel, Inhalt und Zeitstempel hinzu (oder binden Sie ein Dataset), passen Sie Linie und Punkte an und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Timeline

Rendert

Bootstrap-5-Karten + scoped Timeline-CSS

Familie

Daten & Tabellen

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Elemente hinzufügen, Linie gestalten, rendern

Fügen Sie einige Items.Add-Einträge mit Title, Content und Timestamp hinzu, setzen Sie Linien- und Punktgröße und lesen Sie dann 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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Items

Items enthält Einträge mit Title, Content, Timestamp, Icon, Hex-Color und Enum-ColorStyle; jeder wird als Karte mit Punkt dargestellt.

Dataset-Bindung

LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField) erstellt ein Element pro Zeile; die Inhalts- und Zeitstempelfelder sind optional.

Linie

LineColor (Hex) oder LineColorStyle (Enum) plus LineWidth steuern die vertikale Verbindungslinie.

Punkte

DotSize setzt den Markerdurchmesser; die Color oder ColorStyle jedes Elements füllt seinen Punkt.

Zeitstempel

TimeColor (Hex) oder TimeColorStyle (Enum) gestalten die kleine Zeitstempelbeschriftung auf jeder Karte.

Ausgabe

TimelineID identifiziert den Wrapper; HTML gibt die Karten zusammen mit dem scoped Timeline-CSS zurück.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen