Componente Stepper — sgcHTML

De un vistazo

TsgcHTMLComponent_Stepper

Un indicador de pasos que emite marcado de Bootstrap 5 con círculos numerados, conectores y colores de estado por paso. Añade items de paso, establece el State de cada uno, luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Stepper

Genera

Marcado de pasos / asistente de Bootstrap 5

Familia

Navegación y Estructura

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, añade pasos, renderízalo

Añade items de paso, establece cada Title, Description y State, elige un Layout, luego lee HTML (o colócalo en una página TsgcHTMLTemplate_Bootstrap).

uses
  sgcHTML_Enums, sgcHTML_Component_Stepper;

var
  oStepper: TsgcHTMLComponent_Stepper;
  oStep: TsgcHTMLStepItem;
begin
  oStepper := TsgcHTMLComponent_Stepper.Create(nil);
  try
    oStepper.Layout := slHorizontal;
    oStepper.ShowContent := True;
    oStepper.CurrentColorStyle := hcPrimary;

    oStep := oStepper.Items.Add;
    oStep.Title := 'Account';
    oStep.Description := 'Sign in';
    oStep.State := ssCompleted;

    oStep := oStepper.Items.Add;
    oStep.Title := 'Shipping';
    oStep.Description := 'Address';
    oStep.State := ssCurrent;
    oStep.Content := '<p>Enter your delivery address</p>';

    oStep := oStepper.Items.Add;
    oStep.Title := 'Payment';
    oStep.State := ssUpcoming;

    WebModule.Response := oStepper.HTML;   // Bootstrap stepper
  finally
    oStepper.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Stepper.hpp

TsgcHTMLComponent_Stepper *oStepper = new TsgcHTMLComponent_Stepper(NULL);
try
{
  oStepper->Layout = slHorizontal;
  oStepper->ShowContent = true;
  oStepper->CurrentColorStyle = hcPrimary;

  TsgcHTMLStepItem *oStep = oStepper->Items->Add();
  oStep->Title = "Account";
  oStep->Description = "Sign in";
  oStep->State = ssCompleted;

  oStep = oStepper->Items->Add();
  oStep->Title = "Shipping";
  oStep->Description = "Address";
  oStep->State = ssCurrent;
  oStep->Content = "<p>Enter your delivery address</p>";

  oStep = oStepper->Items->Add();
  oStep->Title = "Payment";
  oStep->State = ssUpcoming;

  String html = oStepper->HTML;   // Bootstrap stepper
}
__finally
{
  delete oStepper;
}

using esegece.sgcWebSockets;

var stepper = new TsgcHTMLComponent_Stepper();
stepper.Layout = TsgcHTMLStepperLayout.slHorizontal;
stepper.ShowContent = true;
stepper.CurrentColorStyle = TsgcHTMLColor.hcPrimary;

var step = stepper.Items.Add();
step.Title = "Account";
step.Description = "Sign in";
step.State = TsgcHTMLStepState.ssCompleted;

step = stepper.Items.Add();
step.Title = "Shipping";
step.Description = "Address";
step.State = TsgcHTMLStepState.ssCurrent;
step.Content = "<p>Enter your delivery address</p>";

step = stepper.Items.Add();
step.Title = "Payment";
step.State = TsgcHTMLStepState.ssUpcoming;

string html = stepper.HTML;   // Bootstrap stepper

Referencia

Propiedades y métodos clave

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

Pasos

Items es la colección TsgcHTMLStepItems; Items.Add devuelve un TsgcHTMLStepItem con Title, Description, Content, State e Icon.

State

El State de cada paso es ssUpcoming, ssCurrent o ssCompleted, que controla el color del círculo, el relleno del conector y (con ShowContent) el panel del paso actual.

Layout

Layout elige slHorizontal o slVertical; ShowContent genera el Content del paso activo bajo el riel.

Colores de estado

CompletedColorStyle, CurrentColorStyle y UpcomingColorStyle (cada uno un TsgcHTMLColor) tiñen los círculos; las variantes string *Color las sobrescriben con hex directo.

Apariencia

CircleSize, ConnectorHeight, CompletedIcon, StepFontSize y StepDescFontSize ajustan el tamaño y los glifos.

Salida

HTML devuelve el marcado del stepper y StepperID establece el id de su elemento — sírvelo, o asígnalo al BodyContent de una plantilla de página.

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

Stepper