Bir bakışta

TsgcHTMLComponent_Stepper

Numaralı daireler, bağlayıcılar ve adım başına durum renkleriyle Bootstrap 5 işaretlemesi üreten bir adım göstergesi. Adım öğeleri ekleyin, her birinin State'ini ayarlayın, ardından HTML özelliğini okuyun.

Bileşen sınıfı

TsgcHTMLComponent_Stepper

İşler

Bootstrap 5 adım / sihirbaz işaretlemesi

Aile

Gezinme & Yapı

Diller

Delphi, C++ Builder, .NET

QuickStart

Oluşturun, adımlar ekleyin, işleyin

Adım öğeleri ekleyin, her Title, Description ve State'i ayarlayın, bir Layout seçin, ardından HTML'i okuyun (ya da bir TsgcHTMLTemplate_Bootstrap sayfasına yerleştirin).

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

Başvuru

Temel özellikler & yöntemler

En sık başvurduğunuz üyeler.

Adımlar

Items, TsgcHTMLStepItems koleksiyonudur; Items.Add, Title, Description, Content, State ve Icon içeren bir TsgcHTMLStepItem döndürür.

Durum

Her adımın State'i ssUpcoming, ssCurrent veya ssCompleted'tır; daire rengini, bağlayıcı dolgusunu ve (ShowContent ile) geçerli adımın panelini yürütür.

Düzen

Layout, slHorizontal veya slVertical seçer; ShowContent, etkin adımın Content'ini rayın altına işler.

Durum renkleri

CompletedColorStyle, CurrentColorStyle ve UpcomingColorStyle (her biri bir TsgcHTMLColor), daireleri renklendirir; *Color dize varyantları bunları ham onaltılıkla geçersiz kılar.

Görünüm

CircleSize, ConnectorHeight, CompletedIcon, StepFontSize ve StepDescFontSize, boyutlandırmayı ve glifleri ayarlar.

Çıktı

HTML, adım göstergesi işaretlemesini döndürür ve StepperID, onun öğe kimliğini ayarlar — sunun ya da bir sayfa şablonunun BodyContent'ine atayın.

Kaynaklar

Keşfetmeye devam edin

	Tüm sgcHTML Bileşenleri60'tan fazla bileşenin tam özellik matrisine göz atın.	Aç
	Ücretsiz Deneme Sürümünü İndirin30 günlük deneme, 60.HTML demo projeleriyle birlikte gelir.	Aç
	FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları.	Aç

Stepper