At a glance

TsgcHTMLComponent_Stepper

A step indicator that emits Bootstrap 5 markup with numbered circles, connectors and per-step state colors. Add step items, set each one's State, then read the HTML property.

Component class

TsgcHTMLComponent_Stepper

Renders

Bootstrap 5 step / wizard markup

Family

Navigation & Structure

Languages

Delphi, C++ Builder, .NET

QuickStart

Create it, add steps, render it

Add step items, set each Title, Description and State, pick a Layout, then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).

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

Reference

Key properties & methods

The members you reach for most often.

Steps

Items is the TsgcHTMLStepItems collection; Items.Add returns a TsgcHTMLStepItem with Title, Description, Content, State and Icon.

State

Each step's State is ssUpcoming, ssCurrent or ssCompleted, driving the circle color, the connector fill and (with ShowContent) the current step's panel.

Layout

Layout picks slHorizontal or slVertical; ShowContent renders the active step's Content beneath the rail.

State colors

CompletedColorStyle, CurrentColorStyle and UpcomingColorStyle (each a TsgcHTMLColor) tint the circles; the *Color string variants override with raw hex.

Appearance

CircleSize, ConnectorHeight, CompletedIcon, StepFontSize and StepDescFontSize tune the sizing and glyphs.

Output

HTML returns the stepper markup and StepperID sets its element id — serve it, or assign it to a page template's BodyContent.

Resources

Keep exploring

	All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.	Open
	Download Free TrialThe 30-day trial ships the 60.HTML demo projects.	Open
	PricingSingle, Team and Site licenses with full source code.	Open

Stepper