In één oogopslag

TsgcHTMLComponent_ButtonGroup

Een knoppengroepcomponent dat een Bootstrap 5-btn-group uitstuurt. Voeg knopitems toe, stel de stijl en toestand van elk in en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_ButtonGroup

Rendert

Bootstrap 5 btn-group-markup

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, voeg knoppen toe, render hem

Voeg knopitems toe, stel voor elk Text, ButtonStyle en de Active-vlag in, kies een Size en lees dan HTML (of plaats het in een TsgcHTMLTemplate_Bootstrap-pagina).

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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Items

Items is de TsgcHTMLButtonItems-verzameling; Items.Add retourneert een TsgcHTMLButtonItem met Text, Href, Active, Disabled en ButtonStyle.

Itemstijl

De ButtonStyle van elk item (een TsgcHTMLButtonStyle zoals bsOutlinePrimary) bepaalt zijn variant, en BtnClass overschrijft die met ruwe classes; een Href rendert het item als een anker in plaats van een knop.

Grootte en layout

Size kiest bgsDefault, bgsSmall of bgsLarge; Vertical stapelt de knoppen tot een btn-group-vertical.

Toegankelijkheid

AriaLabel stelt het aria-label van de groep in voor schermlezers; GroupID kent zijn element-id toe.

Uitvoer

HTML retourneert de btn-group-wrapper en zijn knop- / link-kinderen — serveer hem, of wijs hem toe aan de BodyContent van een paginatemplate.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

ButtonGroup