Komponent ButtonGroup — sgcHTML

W skrócie

TsgcHTMLComponent_ButtonGroup

Komponent grupy przycisków, który generuje element btn-group Bootstrap 5. Dodaj pozycje przycisków, ustaw styl i stan każdej z nich, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_ButtonGroup

Renderuje

Znaczniki btn-group Bootstrap 5

Rodzina

Nawigacja i struktura

Języki

Delphi, C++ Builder, .NET

Szybki start

Utwórz go, dodaj przyciski, wyrenderuj

Dodaj pozycje przycisków, ustaw dla każdej Text, ButtonStyle i flagę Active, wybierz Size, a następnie odczytaj HTML (albo umieść go na stronie TsgcHTMLTemplate_Bootstrap).

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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Pozycje

Items to kolekcja TsgcHTMLButtonItems; Items.Add zwraca TsgcHTMLButtonItem z Text, Href, Active, Disabled i ButtonStyle.

Styl pozycji

ButtonStyle każdej pozycji (TsgcHTMLButtonStyle, na przykład bsOutlinePrimary) ustawia jej wariant, a BtnClass nadpisuje go surowymi klasami; obecność Href renderuje pozycję jako odnośnik zamiast przycisku.

Rozmiar i układ

Size wybiera bgsDefault, bgsSmall lub bgsLarge; Vertical układa przyciski w stos jako btn-group-vertical.

Dostępność

AriaLabel ustawia atrybut aria-label grupy dla czytników ekranu; GroupID przypisuje identyfikator elementu.

Wynik

HTML zwraca kontener btn-group i jego elementy podrzędne przyciski / linki — udostępnij go lub przypisz do właściwości BodyContent szablonu strony.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

ButtonGroup