Stepper
TsgcHTMLComponent_Stepper — Delphi、C++ Builder、.NET で、完了、現在、これからの状態を備えたウィザード / ステップ進捗インジケーターをレンダリングします。
TsgcHTMLComponent_Stepper — Delphi、C++ Builder、.NET で、完了、現在、これからの状態を備えたウィザード / ステップ進捗インジケーターをレンダリングします。
番号付きの円、コネクター、ステップごとの状態色を備えた Bootstrap 5 マークアップを出力するステップインジケーターです。ステップ項目を追加し、それぞれの State を設定してから、HTML プロパティを読み取ります。
TsgcHTMLComponent_Stepper
Bootstrap 5 のステップ / ウィザードマークアップ
Delphi, C++ Builder, .NET
ステップ項目を追加し、各 Title、Description、State を設定し、Layout を選択してから、HTML を読み取ります（または 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最もよく使うメンバーです。
Items は TsgcHTMLStepItems コレクションです。Items.Add は、Title、Description、Content、State、Icon を持つ TsgcHTMLStepItem を返します。
各ステップの State は ssUpcoming、ssCurrent、ssCompleted で、円の色、コネクターの塗りつぶし、（ShowContent を伴う）現在ステップのパネルを駆動します。
Layout は slHorizontal または slVertical を選択します。ShowContent は、レールの下にアクティブなステップの Content をレンダリングします。
CompletedColorStyle、CurrentColorStyle、UpcomingColorStyle（それぞれ TsgcHTMLColor）は円に色を付けます。*Color の文字列バリアントは生の 16 進数で上書きします。
CircleSize、ConnectorHeight、CompletedIcon、StepFontSize、StepDescFontSize はサイズとグリフを調整します。
HTML はステッパーのマークアップを返し、StepperID はその要素 id を設定します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。