Visão geral

TsgcHTMLComponent_Timeline

Adicione itens de linha do tempo com um título, conteúdo e carimbo de tempo (ou vincule um dataset), ajuste a linha e os pontos e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Timeline

Renderiza

Cards Bootstrap 5 + CSS de linha do tempo com escopo

Família

Dados & Tabelas

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Adicione itens, estilize a linha, renderize

Adicione algumas entradas Items.Add com um Title, Content e Timestamp, defina o tamanho da linha e do ponto e então leia 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Items

Items contém entradas com Title, Content, Timestamp, Icon, Color hex e enum ColorStyle; cada uma renderiza como um card com ponto.

Vinculação a dataset

LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField) cria um item por linha; os campos de conteúdo e carimbo de tempo são opcionais.

Linha

LineColor (hex) ou LineColorStyle (enum) mais LineWidth controlam o conector vertical.

Pontos

DotSize define o diâmetro do marcador; a Color ou ColorStyle de cada item preenche seu ponto.

Carimbos de tempo

TimeColor (hex) ou TimeColorStyle (enum) estilizam o pequeno rótulo de carimbo de tempo em cada card.

Saída

TimelineID identifica o wrapper; HTML retorna os cards junto com o CSS da linha do tempo com escopo.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir

Timeline