Bir bakışta

TsgcHTMLComponent_ButtonGroup

Bir Bootstrap 5 btn-group üreten bir düğme grubu bileşeni. Düğme öğeleri ekleyin, her birinin stilini ve durumunu ayarlayın, ardından HTML özelliğini okuyun.

Bileşen sınıfı

TsgcHTMLComponent_ButtonGroup

İşler

Bootstrap 5 btn-group işaretlemesi

Aile

Gezinme & Yapı

Diller

Delphi, C++ Builder, .NET

QuickStart

Oluşturun, düğmeler ekleyin, işleyin

Düğme öğeleri ekleyin, her Text, ButtonStyle ve Active bayrağını ayarlayın, bir Size seçin, ardından HTML'i okuyun (ya da bir TsgcHTMLTemplate_Bootstrap sayfasına bırakın).

uses
  sgcHTML_Enums, sgcHTML_Component_ButtonGroup;

var
  oGroup: TsgcHTMLComponent_ButtonGroup;
  oBtn: TsgcHTMLButtonItem;
begin
  oGroup := TsgcHTMLComponent_ButtonGroup.Create(nil);
  try
    oGroup.Size := bgsLarge;
    oGroup.AriaLabel := 'View mode';

    oBtn := oGroup.Items.Add;
    oBtn.Text := 'Day';
    oBtn.ButtonStyle := bsOutlinePrimary;
    oBtn.Active := True;

    oBtn := oGroup.Items.Add;
    oBtn.Text := 'Week';
    oBtn.ButtonStyle := bsOutlinePrimary;

    oBtn := oGroup.Items.Add;
    oBtn.Text := 'Month';
    oBtn.ButtonStyle := bsOutlinePrimary;
    oBtn.Disabled := True;

    WebModule.Response := oGroup.HTML;   // Bootstrap btn-group
  finally
    oGroup.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_ButtonGroup.hpp

TsgcHTMLComponent_ButtonGroup *oGroup = new TsgcHTMLComponent_ButtonGroup(NULL);
try
{
  oGroup->Size = bgsLarge;
  oGroup->AriaLabel = "View mode";

  TsgcHTMLButtonItem *oBtn = oGroup->Items->Add();
  oBtn->Text = "Day";
  oBtn->ButtonStyle = bsOutlinePrimary;
  oBtn->Active = true;

  oBtn = oGroup->Items->Add();
  oBtn->Text = "Week";
  oBtn->ButtonStyle = bsOutlinePrimary;

  oBtn = oGroup->Items->Add();
  oBtn->Text = "Month";
  oBtn->ButtonStyle = bsOutlinePrimary;
  oBtn->Disabled = true;

  String html = oGroup->HTML;   // Bootstrap btn-group
}
__finally
{
  delete oGroup;
}

using esegece.sgcWebSockets;

var group = new TsgcHTMLComponent_ButtonGroup();
group.Size = TsgcHTMLButtonGroupSize.bgsLarge;
group.AriaLabel = "View mode";

var btn = group.Items.Add();
btn.Text = "Day";
btn.ButtonStyle = TsgcHTMLButtonStyle.bsOutlinePrimary;
btn.Active = true;

btn = group.Items.Add();
btn.Text = "Week";
btn.ButtonStyle = TsgcHTMLButtonStyle.bsOutlinePrimary;

btn = group.Items.Add();
btn.Text = "Month";
btn.ButtonStyle = TsgcHTMLButtonStyle.bsOutlinePrimary;
btn.Disabled = true;

string html = group.HTML;   // Bootstrap btn-group

Başvuru

Temel özellikler & yöntemler

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

Öğeler

Items, TsgcHTMLButtonItems koleksiyonudur; Items.Add, Text, Href, Active, Disabled ve ButtonStyle içeren bir TsgcHTMLButtonItem döndürür.

Öğe stili

Her öğenin ButtonStyle'ı (bsOutlinePrimary gibi bir TsgcHTMLButtonStyle) çeşidini ayarlar ve BtnClass bunu ham sınıflarla geçersiz kılar; bir Href, öğeyi bir düğme yerine bir bağlantı olarak işler.

Boyut & düzen

Size, bgsDefault, bgsSmall ya da bgsLarge'ı seçer; Vertical, düğmeleri bir btn-group-vertical içinde üst üste yığar.

Erişilebilirlik

AriaLabel, ekran okuyucular için grubun aria-label'ını ayarlar; GroupID öğe kimliğini atar.

Çıktı

HTML, btn-group sarmalayıcısını ve düğme / bağlantı alt öğelerini döndürür — 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ç

ButtonGroup