Sidebar コンポーネント — sgcHTML

概要

TsgcHTMLComponent_Sidebar

任意のブランド、nav-pill リンク、ヘッダー、区切り線、フッターを備えた Bootstrap 5 の垂直サイドバーを出力するナビゲーションコンポーネントです。項目を追加してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Sidebar

レンダリング内容

Bootstrap 5 のサイドバーマークアップ

ファミリー

ナビゲーション & 構造

言語

Delphi, C++ Builder, .NET

クイックスタート

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

Brand と Width を設定し、項目（リンク、ヘッダー、区切り線）を Items にプッシュしてから、HTML を読み取ります。

uses
  sgcHTML_Component_Sidebar;

var
  oSidebar: TsgcHTMLComponent_Sidebar;
begin
  oSidebar := TsgcHTMLComponent_Sidebar.Create(nil);
  try
    oSidebar.Brand := 'Dashboard';
    oSidebar.Width := '240px';
    oSidebar.Dark := True;

    with oSidebar.Items.Add do begin Text := 'Main'; Header := True; end;
    with oSidebar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oSidebar.Items.Add do begin Text := 'Reports'; Href := '/reports'; end;
    oSidebar.Items.Add.Divider := True;
    with oSidebar.Items.Add do begin Text := 'Settings'; Href := '/settings'; end;

    oSidebar.FooterText := 'v2.0';

    WebModule.Response := oSidebar.HTML;   // vertical <div> nav
  finally
    oSidebar.Free;
  end;
end;

// includes: sgcHTML_Component_Sidebar.hpp

TsgcHTMLComponent_Sidebar *oSidebar = new TsgcHTMLComponent_Sidebar(NULL);
try
{
  oSidebar->Brand = "Dashboard";
  oSidebar->Width = "240px";
  oSidebar->Dark = true;

  TsgcHTMLSidebarItem *oItem = oSidebar->Items->Add();
  oItem->Text = "Main"; oItem->Header = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Reports"; oItem->Href = "/reports";
  oSidebar->Items->Add()->Divider = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Settings"; oItem->Href = "/settings";

  oSidebar->FooterText = "v2.0";

  String html = oSidebar->HTML;   // vertical <div> nav
}
__finally
{
  delete oSidebar;
}

using esegece.sgcWebSockets;

var sidebar = new TsgcHTMLComponent_Sidebar();
sidebar.Brand = "Dashboard";
sidebar.Width = "240px";
sidebar.Dark = true;

var item = sidebar.Items.Add();
item.Text = "Main"; item.Header = true;
item = sidebar.Items.Add(); item.Text = "Home"; item.Href = "/"; item.Active = true;
item = sidebar.Items.Add(); item.Text = "Reports"; item.Href = "/reports";
sidebar.Items.Add().Divider = true;
item = sidebar.Items.Add(); item.Text = "Settings"; item.Href = "/settings";

sidebar.FooterText = "v2.0";

string html = sidebar.HTML;   // vertical <div> nav

リファレンス

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

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

Brand

Brand はパネルの上部に表示される見出しを設定します。BrandHref はそのリンク先（既定値は #）です。

Items

Items.Add は TsgcHTMLSidebarItem を返します。リンクには Text、Href、Icon、Active を設定するか、セクションタイトルや区切りには Header / Divider をフラグとして設定します。

Theme

Dark（既定値 True）は、ダックとライトの背景、および対応するリンクテキストの色を切り替えます。

Layout

Width はパネルの幅（既定値は 250px）を設定します。Fixed はそれを左端に固定します。SidebarID と CSSClass は id と追加のクラスを設定します。

FooterHTML は区切り線の下に生のマークアップを注入します。HTML が設定されていない場合、FooterText が控えめなキャプションをレンダリングします。

Output

HTML は完全な垂直方向の <div> ナビゲーションを返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

リソース

さらに詳しく

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

Sidebar