NavBar コンポーネント — sgcHTML

概要

TsgcHTMLComponent_NavBar

ブランド、レスポンシブなトグラー、折りたたみ可能なリンクリストを備えた Bootstrap 5 の <nav class="navbar"> を出力するナビゲーションコンポーネントです。ブランドを設定し、項目を追加してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_NavBar

レンダリング内容

Bootstrap 5 の navbar マークアップ

ファミリー

ナビゲーション & 構造

言語

Delphi, C++ Builder, .NET

クイックスタート

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

Brand を設定し、1 つ以上の項目を Items にプッシュしてから、HTML を読み取ります（または TsgcHTMLTemplate_Bootstrap ページに組み込みます）。

uses
  sgcHTML_Component_NavBar;

var
  oNavBar: TsgcHTMLComponent_NavBar;
begin
  oNavBar := TsgcHTMLComponent_NavBar.Create(nil);
  try
    oNavBar.Brand := 'Acme Inc.';
    oNavBar.BrandHref := '/';
    oNavBar.Theme := ntDark;
    oNavBar.Expand := neLarge;

    with oNavBar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oNavBar.Items.Add do begin Text := 'Products'; Href := '/products'; end;
    with oNavBar.Items.Add do begin Text := 'Contact'; Href := '/contact'; end;

    WebModule.Response := oNavBar.HTML;   // <nav class="navbar"> ...
  finally
    oNavBar.Free;
  end;
end;

// includes: sgcHTML_Component_NavBar.hpp

TsgcHTMLComponent_NavBar *oNavBar = new TsgcHTMLComponent_NavBar(NULL);
try
{
  oNavBar->Brand = "Acme Inc.";
  oNavBar->BrandHref = "/";
  oNavBar->Theme = ntDark;
  oNavBar->Expand = neLarge;

  TsgcHTMLNavItem *oItem = oNavBar->Items->Add();
  oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oNavBar->Items->Add(); oItem->Text = "Products"; oItem->Href = "/products";
  oItem = oNavBar->Items->Add(); oItem->Text = "Contact"; oItem->Href = "/contact";

  String html = oNavBar->HTML;   // <nav class="navbar"> ...
}
__finally
{
  delete oNavBar;
}

using esegece.sgcWebSockets;

var navbar = new TsgcHTMLComponent_NavBar();
navbar.Brand = "Acme Inc.";
navbar.BrandHref = "/";
navbar.Theme = TsgcHTMLNavBarTheme.ntDark;
navbar.Expand = TsgcHTMLNavBarExpand.neLarge;

var item = navbar.Items.Add();
item.Text = "Home"; item.Href = "/"; item.Active = true;
item = navbar.Items.Add(); item.Text = "Products"; item.Href = "/products";
item = navbar.Items.Add(); item.Text = "Contact"; item.Href = "/contact";

string html = navbar.HTML;   // <nav class="navbar"> ...

リファレンス

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

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

Brand

Brand は左側に表示されるブランドテキストを設定します。BrandHref はそのリンク先（既定値は #）です。

Links

Items.Add は TsgcHTMLNavItem を返します。その Text、Href、Active、Disabled を設定して、折りたたみ可能なリンクリストを構築します。

Theme

Theme は ntDark（既定）または ntLight を選択し、Bootstrap のダーク/ライトの navbar 背景にマッピングされます。

Responsive breakpoint

Expand は、トグラーが折りたたまれるタイミングを選択します: neSmall、neMedium、neLarge（既定）、neXLarge、neAlways。

Layout

Fluid は container-fluid と container を切り替えます。NavBarID は要素 id を設定します。CSSClass は追加のクラスを付加します。

Output

HTML は、ブランド、トグラー、折りたたみ可能なナビゲーションを含む完全な <nav class="navbar"> を返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

リソース

さらに詳しく

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

NavBar