En bref

TsgcHTMLComponent_Timeline

Ajoutez des éléments de chronologie avec un titre, un contenu et un horodatage (ou liez un jeu de données), ajustez la ligne et les points, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Timeline

Produit

Des cartes Bootstrap 5 + CSS de chronologie dédié

Famille

Données & Tableaux

Langages

Delphi, C++ Builder, .NET

QuickStart

Ajoutez des éléments, stylisez la ligne, affichez-la

Ajoutez quelques entrées Items.Add avec un Title, un Content et un Timestamp, définissez la taille de la ligne et des points, puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Items

Items contient des entrées avec Title, Content, Timestamp, Icon, une Color hexadécimale et une énumération ColorStyle ; chacune est rendue comme une carte à point.

Liaison de jeu de données

LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField) crée un élément par ligne ; les champs de contenu et d'horodatage sont optionnels.

Ligne

LineColor (hexadécimal) ou LineColorStyle (énumération) plus LineWidth contrôlent le connecteur vertical.

Points

DotSize définit le diamètre du marqueur ; la Color ou le ColorStyle de chaque élément remplit son point.

Horodatages

TimeColor (hexadécimal) ou TimeColorStyle (énumération) stylisent le petit libellé d'horodatage de chaque carte.

Sortie

TimelineID identifie le conteneur ; HTML renvoie les cartes avec le CSS de chronologie dédié.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir

Timeline