In één oogopslag

TsgcHTMLComponent_Stepper

Een stapindicator die Bootstrap 5-markup uitstuurt met genummerde cirkels, verbindingen en per-stap statuskleuren. Voeg stapitems toe, stel de State van elk in en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_Stepper

Rendert

Bootstrap 5 stap- / wizard-markup

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, voeg stappen toe, render hem

Voeg stapitems toe, stel voor elk Title, Description en State in, kies een Layout en lees dan HTML (of plaats het in een TsgcHTMLTemplate_Bootstrap-pagina).

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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Stappen

Items is de TsgcHTMLStepItems-verzameling; Items.Add retourneert een TsgcHTMLStepItem met Title, Description, Content, State en Icon.

Status

De State van elke stap is ssUpcoming, ssCurrent of ssCompleted en stuurt de cirkelkleur, de verbindingsvulling en (met ShowContent) het paneel van de huidige stap aan.

Layout

Layout kiest slHorizontal of slVertical; ShowContent rendert de Content van de actieve stap onder de rail.

Statuskleuren

CompletedColorStyle, CurrentColorStyle en UpcomingColorStyle (elk een TsgcHTMLColor) kleuren de cirkels; de *Color-stringvarianten overschrijven met ruwe hex.

Uiterlijk

CircleSize, ConnectorHeight, CompletedIcon, StepFontSize en StepDescFontSize stemmen de afmetingen en glyphs af.

Uitvoer

HTML retourneert de stepper-markup en StepperID stelt de element-id in — serveer hem, of wijs hem toe aan de BodyContent van een paginatemplate.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

Stepper