In sintesi

TsgcHTMLComponent_Timeline

Aggiungi elementi della timeline con un titolo, un contenuto e un timestamp (oppure collega un dataset), regola la linea e gli indicatori, quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_Timeline

Renderizza

Bootstrap 5 cards + scoped timeline CSS

Famiglia

Dati e Tabelle

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Aggiungi gli elementi, stila la linea, renderizzala

Inserisci alcune voci con Items.Add indicando Title, Content e Timestamp, imposta la dimensione della linea e degli indicatori, quindi leggi 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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Items

Items contiene voci con Title, Content, Timestamp, Icon, Color esadecimale e ColorStyle enum; ciascuna viene renderizzata come una card con indicatore.

Binding ai dataset

LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField) crea un elemento per ogni riga; i campi contenuto e timestamp sono opzionali.

Linea

LineColor (esadecimale) o LineColorStyle (enum) più LineWidth controllano il connettore verticale.

Indicatori

DotSize imposta il diametro del marcatore; il Color o il ColorStyle di ogni elemento riempie il suo indicatore.

Timestamp

TimeColor (esadecimale) o TimeColorStyle (enum) definiscono lo stile della piccola etichetta del timestamp su ogni card.

Output

TimelineID identifica il contenitore; HTML restituisce le card insieme al CSS dedicato della timeline.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 60 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri

Timeline