Toolbar コンポーネント — sgcHTML

概要

区切りで分割された btn-group からなる Bootstrap の <div class="btn-toolbar"> を出力するナビゲーションコンポーネントです。ボタン（と区切り）を追加してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Toolbar

レンダリング内容

Bootstrap の btn-toolbar マークアップ

ファミリー

ナビゲーション & 構造

言語

Delphi, C++ Builder, .NET

クイックスタート

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

各ボタンについて AddButton を呼び出し、グループを区切るために AddSeparator を呼び出してから、HTML を読み取ります。

uses
  sgcHTML_Enums, sgcHTML_Component_Toolbar;

var
  oToolbar: TsgcHTMLComponent_Toolbar;
begin
  oToolbar := TsgcHTMLComponent_Toolbar.Create(nil);
  try
    oToolbar.Size := tbsDefault;

    oToolbar.AddButton('New', bsPrimary, '/new');
    oToolbar.AddButton('Edit', bsOutlinePrimary, '/edit');
    oToolbar.AddSeparator;
    oToolbar.AddButton('Delete', bsOutlineDanger, '/delete');

    WebModule.Response := oToolbar.HTML;   // <div class="btn-toolbar">
  finally
    oToolbar.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Toolbar.hpp

TsgcHTMLComponent_Toolbar *oToolbar = new TsgcHTMLComponent_Toolbar(NULL);
try
{
  oToolbar->Size = tbsDefault;

  oToolbar->AddButton("New", bsPrimary, "/new");
  oToolbar->AddButton("Edit", bsOutlinePrimary, "/edit");
  oToolbar->AddSeparator();
  oToolbar->AddButton("Delete", bsOutlineDanger, "/delete");

  String html = oToolbar->HTML;   // <div class="btn-toolbar">
}
__finally
{
  delete oToolbar;
}

using esegece.sgcWebSockets;

var toolbar = new TsgcHTMLComponent_Toolbar();
toolbar.Size = TsgcHTMLToolbarSize.tbsDefault;

toolbar.AddButton("New", TsgcHTMLButtonStyle.bsPrimary, "/new");
toolbar.AddButton("Edit", TsgcHTMLButtonStyle.bsOutlinePrimary, "/edit");
toolbar.AddSeparator();
toolbar.AddButton("Delete", TsgcHTMLButtonStyle.bsOutlineDanger, "/delete");

string html = toolbar.HTML;   // <div class="btn-toolbar">

リファレンス

主なプロパティとメソッド

最もよく使うメンバーです。

Buttons

AddButton(text, style, href) はボタンを追加します。href がない場合は <button> をレンダリングし、ある場合はボタン風にスタイル設定されたアンカーをレンダリングします。

Groups

AddSeparator は現在の btn-group を閉じ、小さな間隔を空けて新しいものを開始するため、ボタンが論理的なグループにまとまります。

Items

Items.Add は、より細かい制御のための TsgcHTMLToolbarItem を返します。Text、Href、ButtonStyle、Icon、Disabled、Separator、Tooltip を設定します。

Style

項目ごとに、ButtonStyle は任意の TsgcHTMLButtonStyle（ソリッドまたはアウトラインのバリアント、既定値 bsOutlinePrimary）を選択します。Tooltip は Bootstrap ツールチップを配線します。

Size

Size は tbsDefault、tbsSmall、tbsLarge を選択し、各ボタングループに適用されます。ToolbarID は id を設定します。

Output

HTML は、ボタングループを含む完全な <div class="btn-toolbar"> を返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

リソース

さらに詳しく

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

Toolbar

TsgcHTMLComponent_Toolbar