Stepper
TsgcHTMLComponent_Stepper — renderizza un indicatore di procedura guidata / avanzamento per passi con stati completato, corrente e successivo, in Delphi, C++ Builder e .NET.
TsgcHTMLComponent_Stepper — renderizza un indicatore di procedura guidata / avanzamento per passi con stati completato, corrente e successivo, in Delphi, C++ Builder e .NET.
Un indicatore di passi che emette markup Bootstrap 5 con cerchi numerati, connettori e colori di stato per ogni passo. Aggiungi gli elementi passo, imposta lo State di ciascuno, quindi leggi la proprietà HTML.
TsgcHTMLComponent_Stepper
Bootstrap 5 step / wizard markup
Delphi, C++ Builder, .NET
Aggiungi gli elementi passo, imposta per ciascuno Title, Description e State, scegli un Layout, quindi leggi HTML (oppure inseriscilo in una pagina 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 stepperI membri che utilizzerai più spesso.
Items è la collezione TsgcHTMLStepItems; Items.Add restituisce un TsgcHTMLStepItem con Title, Description, Content, State e Icon.
Lo State di ogni passo è ssUpcoming, ssCurrent o ssCompleted, e determina il colore del cerchio, il riempimento del connettore e (con ShowContent) il pannello del passo corrente.
Layout sceglie slHorizontal o slVertical; ShowContent renderizza il Content del passo attivo sotto la barra.
CompletedColorStyle, CurrentColorStyle e UpcomingColorStyle (ciascuno un TsgcHTMLColor) colorano i cerchi; le varianti stringa *Color li sovrascrivono con valori esadecimali grezzi.
CircleSize, ConnectorHeight, CompletedIcon, StepFontSize e StepDescFontSize regolano il dimensionamento e i glifi.
HTML restituisce il markup dello stepper e StepperID ne imposta l’id dell’elemento — servilo, oppure assegnalo al BodyContent di un template di pagina.