Stepper
TsgcHTMLComponent_Stepper — 渲染一个向导 / 步骤进度指示器，带有已完成、当前和即将进行的状态，适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_Stepper — 渲染一个向导 / 步骤进度指示器，带有已完成、当前和即将进行的状态，适用于 Delphi、C++ Builder 和 .NET。
一个步骤指示器，发出带有编号圆圈、连接线和每步状态颜色的 Bootstrap 5 标记。添加步骤项目，设置每个项目的 State，然后读取 HTML 属性。
添加步骤项目，设置每个 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 字符串变体用原始十六进制覆盖。
CircleSize、ConnectorHeight、CompletedIcon、StepFontSize 和 StepDescFontSize 调整尺寸和图标。
HTML 返回步骤指示器标记，StepperID 设置其元素 id — 直接提供服务，或将其赋给页面模板的 BodyContent。