Navbar Reactコンポーネント

Navbarは、画面上部の固定された(FixedとThroughのレイアウトタイプを持つ)領域で、Page titleとNavigation要素を含みます。

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

Navbarコンポーネント

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

Navbar (ナビバー)
NavLeft (ナビレフト)
ナビ右
ナビタイトル
ナビタイトル（大

ナビゲーションバーのプロパティ

Prop	Type	Default	Description
<Navbar> properties
title	string		ナブバーのタイトル
subtitle	string		ナブバーのサブタイトル
backLink	boolean string		テキストによるバックリンクの追加 (`string` 値が指定された場合)
backLinkUrl	string		カスタムバックリンクURL
backLinkForce	boolean	false	履歴の前のページを無視してページを強制的にロードする
backLinkShowText	boolean		MDテーマではデフォルトでバックリンクテキストを無効にする
sliding	boolean	true	nav要素の "スライド "効果を有効にする
noShadow	boolean	false	Materialテーマのシャドウレンダリングを無効にする
noHairline	boolean	false	iOSテーマで、ナビバー下部の細いボーダー（ヘアライン）を無効にする
hidden	boolean	false	ナビバーを非表示にする
innerClass	string		navbar-inner` 要素に追加クラスを追加します。
innerClassName	string		innerClass` プロップのエイリアス
large	boolean		大きなタイトルのナビバーを有効にする
transparent	boolean		ナビバーを透明にします。大きなナビバーを透明にするために `large` プロップに追加して使用できます。
titleLarge	string		ナビバーの大きなタイトルテキストです。指定されていない場合は、`title` プロップと同じになります。
<NavLeft> properties
backLink	boolean string		テキストでバックリンクを追加します（文字列値が指定された場合
backLinkUrl	string		カスタムバックリンクURL
backLinkForce	boolean	false	履歴の前のページを無視してページを強制的にロードします。
backLinkShowText	boolean		MDテーマのデフォルトでは、バックリンクテキストは無効です。
sliding	boolean		スライド」効果を有効にします。デフォルトでは、親の `Navbar` の `sliding` プロパティーを継承します。
<NavTitle> properties
title	string		要素の内側のタイトルテキストを指定します (子要素がない場合に影響します)
subtitle	string		サブタイトルを指定します。
sliding	boolean		スライディング効果を有効にします。デフォルトでは親の `Navbar` の `sliding` プロップを継承します。
<NavRight> properties
sliding	boolean		スライディング効果を有効にします。デフォルトでは、親の `Navbar` の `sliding` プロップを継承します。

ナンバーメソッド

<Navbar> methods
.hide(animate)	ナビバーを隠す
.show(animate)	ナビバーの表示
.size()	ナビバーのサイズ

ナビバーのイベント

Event	Description
<Navbar> events
backClick clickBack	ナビバーのバックリンクをクリックするとイベントが発生します。
navbarHide	ナビバーが非表示になるとイベントが発生する
navbarShow	イベントはナビバーが表示されたときに発生します。
navbarCollapse	大きなタイトルのナビバーが折りたたまれた時にイベントが発生します（大きなナビバーから通常のナビバーへ
navbarExpand	大きなタイトルのナビバーが拡張されたとき（通常のナビバーから大きなナビバーに）にイベントが発生する
<NavLeft> events
backClick clickBack	ナビバーのバックリンクをクリックするとイベントが発生します。

ナビバーのスロット

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

default - 要素は <div class="navbar-inner"> 要素の子として挿入されます。
before-inner - 要素は <div class="navbar-inner"> 要素の直前に挿入されます。
after-inner - 要素は、
` 要素の直後に挿入されます。
left - 要素は、ナビバーの左要素に挿入されます。
right - 要素はナビバーの右要素に挿入されます。
title - ナビバーのタイトル要素に挿入される要素です。
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>