In sintesi

TsgcHTMLComponent_ButtonGroup

Un componente button-group che emette un btn-group Bootstrap 5. Aggiungi gli elementi pulsante, imposta lo stile e lo stato di ciascuno, quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_ButtonGroup

Renderizza

Bootstrap 5 btn-group markup

Famiglia

Navigazione e Struttura

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Crealo, aggiungi i pulsanti, renderizzalo

Aggiungi gli elementi pulsante, imposta per ciascuno Text, ButtonStyle e il flag Active, scegli una Size, quindi leggi HTML (oppure inseriscilo in una pagina 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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Items

Items è la collezione TsgcHTMLButtonItems; Items.Add restituisce un TsgcHTMLButtonItem con Text, Href, Active, Disabled e ButtonStyle.

Stile dell'elemento

Il ButtonStyle di ogni elemento (un TsgcHTMLButtonStyle come bsOutlinePrimary) ne imposta la variante, e BtnClass lo sovrascrive con classi grezze; un Href renderizza l'elemento come ancora anziché come pulsante.

Dimensione e layout

Size sceglie bgsDefault, bgsSmall o bgsLarge; Vertical impila i pulsanti in un btn-group-vertical.

Accessibilità

AriaLabel imposta l'aria-label del gruppo per gli screen reader; GroupID ne assegna l'id dell'elemento.

Output

HTML restituisce il wrapper btn-group e i suoi pulsanti / link figli — servilo, oppure assegnalo al BodyContent di un template di pagina.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 60 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri

ButtonGroup