Timeline

TsgcHTMLComponent_Timeline — render een verticale tijdlijn van gedateerde gebeurtenissen als kaarten op een gekleurde lijn, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_Timeline

Voeg tijdlijnitems toe met een titel, inhoud en tijdstempel (of koppel een dataset), stem de lijn en stippen af en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_Timeline

Rendert

Bootstrap 5-kaarten + scoped timeline-CSS

Familie

Data en tabellen

Talen

Delphi, C++ Builder, .NET

QuickStart

Voeg items toe, geef de lijn stijl, render het

Voeg een paar Items.Add-vermeldingen toe met een Title, Content en Timestamp, stel de lijn- en stipgrootte in en lees dan 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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Items

Items bevat vermeldingen met Title, Content, Timestamp, Icon, hex-Color en enum ColorStyle; elk rendert als een gestippelde kaart.

Datasetbinding

LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField) maakt één item per rij; de inhouds- en tijdstempelvelden zijn optioneel.

Lijn

LineColor (hex) of LineColorStyle (enum) plus LineWidth bepalen de verticale verbinding.

Stippen

DotSize stelt de markerdiameter in; de Color of ColorStyle van elk item vult zijn stip.

Tijdstempels

TimeColor (hex) of TimeColorStyle (enum) geven het kleine tijdstempel-label op elke kaart stijl.

Uitvoer

TimelineID identificeert de wrapper; HTML retourneert de kaarten samen met de scoped timeline-CSS.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen