ButtonGroup
TsgcHTMLComponent_ButtonGroup — アクティブ状態と無効状態を備えた、ボタンやリンクのセグメント化されたセットを Delphi、C++ Builder、.NET でレンダリングします。
TsgcHTMLComponent_ButtonGroup — アクティブ状態と無効状態を備えた、ボタンやリンクのセグメント化されたセットを Delphi、C++ Builder、.NET でレンダリングします。
Bootstrap 5 の btn-group を出力するボタングループコンポーネントです。ボタン項目を追加し、それぞれのスタイルと状態を設定したら、HTML プロパティを読み取ります。
TsgcHTMLComponent_ButtonGroup
Bootstrap 5 の btn-group マークアップ
Delphi, C++ Builder, .NET
ボタン項目を追加し、各 Text、ButtonStyle、Active フラグを設定し、Size を選んだら、HTML を読み取ります(または 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
最もよく使うメンバー。
Items は TsgcHTMLButtonItems コレクションです。Items.Add は、Text、Href、Active、Disabled、ButtonStyle を持つ TsgcHTMLButtonItem を返します。
各項目の ButtonStyle(bsOutlinePrimary などの TsgcHTMLButtonStyle)がそのバリアントを設定し、BtnClass は生のクラスでそれを上書きします。Href を設定すると、項目はボタンではなくアンカーとしてレンダリングされます。
Size は bgsDefault、bgsSmall、bgsLarge を選択します。Vertical はボタンを btn-group-vertical に縦に積み重ねます。
AriaLabel は、スクリーンリーダー向けにグループの aria-label を設定します。GroupID はその要素の id を割り当てます。
HTML は、btn-group ラッパーとその子のボタン / リンクを返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。