한눈에 보기

TsgcHTMLComponent_Stepper

번호가 매겨진 원, 연결선 및 단계별 상태 색상을 갖춘 Bootstrap 5 마크업을 내보내는 단계 표시기입니다. 단계 항목을 추가하고, 각 항목의 State를 설정한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_Stepper

렌더링

Bootstrap 5 단계 / 마법사 마크업

패밀리

내비게이션 및 구조

언어

Delphi, C++ Builder, .NET

QuickStart

생성하고, 단계를 추가하고, 렌더링하기

단계 항목을 추가하고, 각 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에 할당하십시오.

리소스

계속 살펴보기

	모든 sgcHTML 컴포넌트60개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.	열기
	무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.	열기
	가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.	열기

Stepper