Navbar React コンポーネント

Navbar は、ページタイトルとナビゲーション要素を含む、画面上部の固定（Fixed および Through レイアウトタイプの場合）領域です。

Navbar React コンポーネントは、Navbar コンポーネントを表します。

Navbar コンポーネント

以下のコンポーネントが含まれています。

• Navbar
• NavLeft
• NavRight
• NavTitle
• NavTitleLarge

Navbar プロパティ

Navbar メソッド

Navbar イベント

Navbar スロット

Navbar React コンポーネント（<Navbar>）には、カスタム要素用の追加のスロットがあります

• default - 要素は <div class="navbar-inner"> 要素の子として挿入されます
• before-inner - 要素は <div class="navbar-inner"> 要素の直前に挿入されます
• after-inner - 要素は <div class="navbar-inner"> 要素の直後に挿入されます
• left - 要素は Navbar の左側の要素に挿入されます
• right - 要素は Navbar の右側の要素に挿入されます
• title - 要素は Navbar のタイトル要素に挿入されます
• title-large - 要素は Navbar の大きなタイトルテキスト要素に挿入されます

<Navbar title="My App">
  <a href="#" slot="left">Left Link</a>
  <a href="#" slot="right">Right Link</a>
  <div slot="before-inner">Before Inner</div>
  <div slot="after-inner">After Inner</div>
  <div>Default slot</div>
</Navbar>

{/* Renders to: */}

<div class="navbar">
  <div class="navbar-bg"></div>
  <div>Before Inner</div>
  <div class="navbar-inner">
    <div class="left">
      <a href="#">Left Link</a>
    </div>
    <div class="title">My App</div>
    <div class="right">
      <a href="#">Right Link</a>
    </div>
    <div>Default slot</div>
  </div>
  <div>After Inner</div>
</div>

例

最小限のレイアウト

<Navbar title="My App"></Navbar>

戻るリンク付きの最小限のレイアウト

<Navbar title="My App" backLink="Back"></Navbar>

「スライディング」トランジション効果なし（iOSテーマのみに影響します）

<Navbar title="My App" backLink="Back" sliding="{false}"></Navbar>

右パネルを開くための追加の右リンク付き

<Navbar title="My App" backLink="Back">
  <NavRight>
    <Link icon="icon-bars" panelOpen="right"></Link>
  </NavRight>
</Navbar>

{/* or */}

<Navbar title="My App" backLink="Back">
  <Link slot="right" icon="icon-bars" panelOpen="right"></Link>
</Navbar>

大きなタイトル付き

<Navbar title="My App" backLink="Back" large></Navbar>

{/* with different large title text */}

<Navbar title="My App" backLink="Back" large titleLarge="Large Title"></Navbar>

3つの部分すべて

<Navbar>
  <NavLeft backLink="Back"></NavLeft>
  <NavTitle>My App</NavTitle>
  <NavRight>
    <Link icon="icon-bars" panelOpen="right"></Link>
  </NavRight>
</Navbar>

フルカスタムレイアウト

<Navbar>
  <NavLeft>
    <Link>Left Link</Link>
  </NavLeft>
  <NavTitle>My App</NavTitle>
  <NavRight>
    <Link>Right Link</Link>
  </NavRight>
</Navbar>