Visão geral

TsgcHTMLComponent_Stepper

Um indicador de etapas que emite markup do Bootstrap 5 com círculos numerados, conectores e cores de estado por etapa. Adicione itens de etapa, defina o State de cada um e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Stepper

Renderiza

Markup de etapas / assistente do Bootstrap 5

Família

Navegação & Estrutura

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione etapas, renderize

Adicione itens de etapa, defina o Title, a Description e o State de cada um, escolha um Layout e então leia HTML (ou insira-o em uma 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

Referência

Principais propriedades & métodos

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

Etapas

Items é a coleção TsgcHTMLStepItems; Items.Add retorna um TsgcHTMLStepItem com Title, Description, Content, State e Icon.

Estado

O State de cada etapa é ssUpcoming, ssCurrent ou ssCompleted, conduzindo a cor do círculo, o preenchimento do conector e (com ShowContent) o painel da etapa atual.

Layout

Layout escolhe slHorizontal ou slVertical; ShowContent renderiza o Content da etapa ativa abaixo da trilha.

Cores de estado

CompletedColorStyle, CurrentColorStyle e UpcomingColorStyle (cada um um TsgcHTMLColor) tingem os círculos; as variantes string *Color as substituem por hex bruto.

Aparência

CircleSize, ConnectorHeight, CompletedIcon, StepFontSize e StepDescFontSize ajustam o dimensionamento e os glifos.

Saída

HTML retorna o markup do stepper e StepperID define o id do seu elemento — sirva-o ou atribua-o ao BodyContent de um template de página.

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

Stepper