Stepper Component — sgcHTML

W skrócie

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.

Klasa komponentu

TsgcHTMLComponent_Stepper

Renderuje

Bootstrap 5 step / wizard markup

Rodzina

Nawigacja i struktura

Języki

Delphi, C++ Builder, .NET

Szybki start

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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

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.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

Stepper