Dropdown コンポーネント — sgcHTML

概要

Bootstrap 5 のトグルボタンとその <ul class="dropdown-menu"> を出力するドロップダウンコンポーネントです。メニュー項目を追加し、ボタンのスタイルを設定してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Dropdown

レンダリング内容

Bootstrap 5 の dropdown ボタン + メニュー

ファミリー

ナビゲーション & 構造

言語

Delphi, C++ Builder, .NET

クイックスタート

作成し、項目を追加し、レンダリングする

ButtonText と ButtonStyleEnum を設定し、リンク / ヘッダー / 区切り線の項目を追加してから、HTML を読み取ります（または TsgcHTMLTemplate_Bootstrap ページに組み込みます）。

uses
  sgcHTML_Enums, sgcHTML_Component_Dropdown;

var
  oDropdown: TsgcHTMLComponent_Dropdown;
  oItem: TsgcHTMLDropdownItem;
begin
  oDropdown := TsgcHTMLComponent_Dropdown.Create(nil);
  try
    oDropdown.ButtonText := 'Account';
    oDropdown.ButtonStyleEnum := bsPrimary;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Settings';
    oItem.Header := True;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Profile';
    oItem.Href := '/profile';

    oItem := oDropdown.Items.Add;
    oItem.Divider := True;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Sign out';
    oItem.Href := '/logout';

    WebModule.Response := oDropdown.HTML;   // Bootstrap dropdown
  finally
    oDropdown.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Dropdown.hpp

TsgcHTMLComponent_Dropdown *oDropdown = new TsgcHTMLComponent_Dropdown(NULL);
try
{
  oDropdown->ButtonText = "Account";
  oDropdown->ButtonStyleEnum = bsPrimary;

  TsgcHTMLDropdownItem *oItem = oDropdown->Items->Add();
  oItem->Text = "Settings";
  oItem->Header = true;

  oItem = oDropdown->Items->Add();
  oItem->Text = "Profile";
  oItem->Href = "/profile";

  oItem = oDropdown->Items->Add();
  oItem->Divider = true;

  oItem = oDropdown->Items->Add();
  oItem->Text = "Sign out";
  oItem->Href = "/logout";

  String html = oDropdown->HTML;   // Bootstrap dropdown
}
__finally
{
  delete oDropdown;
}

using esegece.sgcWebSockets;

var dropdown = new TsgcHTMLComponent_Dropdown();
dropdown.ButtonText = "Account";
dropdown.ButtonStyleEnum = TsgcHTMLButtonStyle.bsPrimary;

var item = dropdown.Items.Add();
item.Text = "Settings";
item.Header = true;

item = dropdown.Items.Add();
item.Text = "Profile";
item.Href = "/profile";

item = dropdown.Items.Add();
item.Divider = true;

item = dropdown.Items.Add();
item.Text = "Sign out";
item.Href = "/logout";

string html = dropdown.HTML;   // Bootstrap dropdown

リファレンス

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

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

Items

Items は TsgcHTMLDropdownItems コレクションです。Items.Add は、Text、Href、Disabled、そして Header / Divider フラグを持つ TsgcHTMLDropdownItem を返します。

Item kinds

セクションラベルには Header を、区切り線には Divider を設定します。両方をオフのままにすると通常のリンク項目になります。Disabled は項目をグレーアウトします。

Button

ButtonText はトグルのキャプションです。ButtonStyleEnum（bsPrimary などの TsgcHTMLButtonStyle）はバリアントを選択し、ButtonClass は生のクラスでそれを上書きします。

Split

Split は、メインのアクションボタンの横に、トグルを独立したキャレットボタンとしてレンダリングします。

Output

HTML は、ドロップダウンのラッパー、トグルボタン、メニューを返し、DropdownID はその要素 id を設定します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

リソース

さらに詳しく

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

Dropdown

TsgcHTMLComponent_Dropdown