En bref

TsgcHTMLComponent_Stepper

Un indicateur d'étapes qui émet du balisage Bootstrap 5 avec des cercles numérotés, des connecteurs et des couleurs d'état par étape. Ajoutez des éléments-étapes, définissez le State de chacun, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Stepper

Produit

Du balisage d'étapes / d'assistant Bootstrap 5

Famille

Navigation & Structure

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-le, ajoutez des étapes, affichez-le

Ajoutez des éléments-étapes, définissez le Title, la Description et le State de chacun, choisissez un Layout, puis lisez HTML (ou intégrez-le dans une page 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

Référence

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

Les membres que vous utilisez le plus souvent.

Étapes

Items est la collection TsgcHTMLStepItems ; Items.Add renvoie un TsgcHTMLStepItem avec Title, Description, Content, State et Icon.

État

Le State de chaque étape est ssUpcoming, ssCurrent ou ssCompleted, pilotant la couleur du cercle, le remplissage du connecteur et (avec ShowContent) le panneau de l'étape courante.

Mise en page

Layout choisit slHorizontal ou slVertical ; ShowContent rend le Content de l'étape active sous le rail.

Couleurs d'état

CompletedColorStyle, CurrentColorStyle et UpcomingColorStyle (chacun un TsgcHTMLColor) teintent les cercles ; les variantes de chaîne *Color les remplacent par de l'hexadécimal brut.

Apparence

CircleSize, ConnectorHeight, CompletedIcon, StepFontSize et StepDescFontSize ajustent le dimensionnement et les glyphes.

Sortie

HTML renvoie le balisage du stepper et StepperID définit l'identifiant de son élément — servez-le, ou affectez-le au BodyContent d'un modèle de page.

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

Stepper