Componente Timeline — sgcHTML

De un vistazo

TsgcHTMLComponent_Timeline

Añade elementos a la línea de tiempo con un título, contenido y marca de tiempo (o vincula un dataset), ajusta la línea y los puntos, y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Timeline

Genera

Tarjetas de Bootstrap 5 + CSS encapsulado de la línea de tiempo

Familia

Datos y Tablas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Añade elementos, da estilo a la línea, genérala

Inserta unas cuantas entradas con Items.Add con un Title, Content y Timestamp, define el tamaño de la línea y del punto, y luego lee 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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Items

Items contiene entradas con Title, Content, Timestamp, Icon, Color hexadecimal y el enum ColorStyle; cada una se genera como una tarjeta con punto.

Vinculación a dataset

LoadFromDataSet(aDataSet, aTitleField, aContentField, aTimestampField) crea un elemento por fila; los campos de contenido y marca de tiempo son opcionales.

Línea

LineColor (hex) o LineColorStyle (enum) junto con LineWidth controlan el conector vertical.

Puntos

DotSize define el diámetro del marcador; el Color o ColorStyle de cada elemento rellena su punto.

Marcas de tiempo

TimeColor (hex) o TimeColorStyle (enum) dan estilo a la pequeña etiqueta de marca de tiempo en cada tarjeta.

Salida

TimelineID identifica el contenedor; HTML devuelve las tarjetas junto con el CSS encapsulado de la línea de tiempo.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

Timeline