ButtonGroup

TsgcHTMLComponent_ButtonGroup — アクティブ状態と無効状態を備えた、ボタンやリンクのセグメント化されたセットを Delphi、C++ Builder、.NET でレンダリングします。

TsgcHTMLComponent_ButtonGroup

Bootstrap 5 の btn-group を出力するボタングループコンポーネントです。ボタン項目を追加し、それぞれのスタイルと状態を設定したら、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_ButtonGroup

レンダリング結果

Bootstrap 5 の btn-group マークアップ

言語

Delphi, C++ Builder, .NET

作成し、ボタンを追加し、レンダリングする

ボタン項目を追加し、各 TextButtonStyleActive フラグを設定し、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

ItemsTsgcHTMLButtonItems コレクションです。Items.Add は、TextHrefActiveDisabledButtonStyle を持つ TsgcHTMLButtonItem を返します。

項目のスタイル

各項目の ButtonStylebsOutlinePrimary などの TsgcHTMLButtonStyle)がそのバリアントを設定し、BtnClass は生のクラスでそれを上書きします。Href を設定すると、項目はボタンではなくアンカーとしてレンダリングされます。

サイズ & レイアウト

SizebgsDefaultbgsSmallbgsLarge を選択します。Vertical はボタンを btn-group-vertical に縦に積み重ねます。

アクセシビリティ

AriaLabel は、スクリーンリーダー向けにグループの aria-label を設定します。GroupID はその要素の id を割り当てます。

出力

HTML は、btn-group ラッパーとその子のボタン / リンクを返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

さらに詳しく

すべての sgcHTML コンポーネント60 種類以上のコンポーネントの完全な機能マトリックスを見る。
無料体験版をダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。