Tabs コンポーネント — sgcHTML

概要

TsgcHTMLComponent_Tabs

Bootstrap のタブナビゲーションと、data-bs-toggle="tab" で配線されたペインの tab-content ブロックを出力するナビゲーションコンポーネントです。タイトルと内容を指定して項目を追加してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Tabs

レンダリング内容

Bootstrap のタブ + コンテンツペイン

ファミリー

ナビゲーション & 構造

言語

Delphi, C++ Builder, .NET

クイックスタート

作成し、ペインを追加し、レンダリングする

Style を選択し、Title と Content を指定して項目をプッシュし（1 つを Active としてフラグ付け）、HTML を読み取ります。

uses
  sgcHTML_Component_Tabs;

var
  oTabs: TsgcHTMLComponent_Tabs;
begin
  oTabs := TsgcHTMLComponent_Tabs.Create(nil);
  try
    oTabs.Style := tsTab;
    oTabs.Fill := True;

    with oTabs.Items.Add do begin Title := 'Overview'; Content := '<p>Welcome.</p>'; Active := True; end;
    with oTabs.Items.Add do begin Title := 'Details'; Content := '<p>The details.</p>'; end;
    with oTabs.Items.Add do begin Title := 'Settings'; Content := '<p>Settings.</p>'; end;

    WebModule.Response := oTabs.HTML;   // nav-tabs + tab-content
  finally
    oTabs.Free;
  end;
end;

// includes: sgcHTML_Component_Tabs.hpp

TsgcHTMLComponent_Tabs *oTabs = new TsgcHTMLComponent_Tabs(NULL);
try
{
  oTabs->Style = tsTab;
  oTabs->Fill = true;

  TsgcHTMLTabItem *oItem = oTabs->Items->Add();
  oItem->Title = "Overview"; oItem->Content = "<p>Welcome.</p>"; oItem->Active = true;
  oItem = oTabs->Items->Add(); oItem->Title = "Details"; oItem->Content = "<p>The details.</p>";
  oItem = oTabs->Items->Add(); oItem->Title = "Settings"; oItem->Content = "<p>Settings.</p>";

  String html = oTabs->HTML;   // nav-tabs + tab-content
}
__finally
{
  delete oTabs;
}

using esegece.sgcWebSockets;

var tabs = new TsgcHTMLComponent_Tabs();
tabs.Style = TsgcHTMLTabStyle.tsTab;
tabs.Fill = true;

var item = tabs.Items.Add();
item.Title = "Overview"; item.Content = "<p>Welcome.</p>"; item.Active = true;
item = tabs.Items.Add(); item.Title = "Details"; item.Content = "<p>The details.</p>";
item = tabs.Items.Add(); item.Title = "Settings"; item.Content = "<p>Settings.</p>";

string html = tabs.HTML;   // nav-tabs + tab-content

リファレンス

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

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

Items

Items.Add は TsgcHTMLTabItem を返します。Title、Content（ペインのマークアップ）を設定し、読み込み時にペインが表示されるように 1 つを Active としてフラグ付けします。

Style

Style は tsTab（既定）、tsPill、tsUnderline を選択し、nav-tabs、nav-pills、nav-underline にマッピングされます。

Layout

Vertical はナビゲーションを横方向に配置します。Fill と Justify は、利用可能な幅全体にタブボタンを広げます。

State

項目ごとに、Disabled はタブをグレーアウトし、TabID は生成されるペイン id を上書きします（そうでない場合は TabsID から導出されます）。

Identity

TabsID（既定値 sgcTabs）は、各ボタンをそのペインに配線する、生成されるタブとペインの id の接頭辞になります。

Output

HTML は、ナビゲーションリストと tab-content ペインを返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

リソース

さらに詳しく

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

Tabs