Navbar Vue コンポーネント

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

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

Navbarコンポーネント

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

f7-navbar
f7-nav-left(左)
f7-nav-right (英語)
f7-nav-title (タイトル)
f7-nav-title-large (大型)

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

Prop	Type	Default	Description
<f7-navbar> properties
title	string		ナビゲーションバーのタイトル
subtitle	string		ナブバーのサブタイトル
back-link	boolean string		文字列でバックリンクを追加する（`string`値が指定された場合
back-link-url	string		カスタムバックリンクURL
back-link-force	boolean	false	履歴の前のページを無視してページを強制的にロードする
back-link-show-text	boolean		MDテーマではデフォルトでバックリンクテキストを無効にする
sliding	boolean	true	nav要素の "スライド "効果を有効にする
no-shadow	boolean	false	Materialテーマのシャドウレンダリングを無効にする
no-hairline	boolean	false	iOSテーマで、ナビバー下部の細いボーダー（ヘアライン）を無効にする
hidden	boolean	false	ナビバーを非表示にする
inner-class	string		navbar-inner` 要素に追加クラスを追加します。
inner-class-name	string		inner-class` propのエイリアス
large	boolean		大きなタイトルのナビバーを有効にする
transparent	boolean		ナビバーを透明にします。大きなナビバーを透明にするために `large` プロップに追加して使用することができます。
title-large	string		ナビバーの大きなタイトルテキストを表示します。指定されていなければ、`title` propと同じになります。
<f7-nav-left> properties
back-link	boolean string		テキストでバックリンクを追加します（文字列値が指定された場合
back-link-url	string		カスタムバックリンクURL
back-link-force	boolean	false	履歴の前のページを無視してページを強制的にロードします。
back-link-show-text	boolean		MDテーマのデフォルトでは、バックリンクテキストは無効です。
sliding	boolean		スライド」効果を有効にします。デフォルトでは親の `f7-navbar` の `sliding` プロップを継承します。
<f7-nav-title> properties
title	string		要素の内側のタイトルテキストを指定します（子要素がない場合に影響します
subtitle	string		サブタイトルを指定します。
sliding	boolean		スライド "効果を有効にします。デフォルトでは親の `f7-navbar` の `sliding` を継承します。
<f7-nav-right> properties
sliding	boolean		スライディング効果を有効にします。デフォルトでは、親の `f7-navbar` の `sliding` を継承します。

ナンバーメソッド

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

ナビバーのイベント

Event	Description
<f7-navbar> events
back-click click:back	ナビバーのバックリンクをクリックするとイベントが発生します。
navbar:hide	ナビバーが非表示になるとイベントが発生する
navbar:show	イベントはナビバーが表示されたときに発生します。
navbar:collapse	大きなタイトルのナビバーが折りたたまれた時にイベントが発生します（大きなナビバーから通常のナビバーへ
navbar:expand	大きなタイトルのナビバーが拡張されたとき（通常のナビバーから大きなナビバーに）にイベントが発生する
<f7-nav-left> events
back-click click:back	ナビバーのバックリンクをクリックするとイベントが発生します。

ナビバースロット

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

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

<f7-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>
</f7-navbar>

<!-- にレンダリングされます。 -->

<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>

例

最小限のレイアウト

<f7-navbar title="My App"></f7-navbar>

バックリンク付きのミニマルレイアウト

<f7-navbar title="My App" back-link="Back"></f7-navbar>

スライド」トランジション効果なし（iOSテーマのみに適用

<f7-navbar title="My App" back-link="Back" :sliding="false"></f7-navbar>

右パネルを開くための追加の右リンクあり

<f7-navbar title="My App" back-link="Back">
  <f7-nav-right>
    <f7-link icon="icon-bars" panel-open="right"></f7-link>
  </f7-nav-right>
</f7-navbar>

<!-- または -->

<f7-navbar title="My App" back-link="Back">
  <f7-link slot="right" icon="icon-bars" panel-open="right"></f7-link>
</f7-navbar>

大きなタイトル付き

<f7-navbar title="My App" back-link="Back" large></f7-navbar>

<!-- 異なる大きなタイトルテキストを持つ -->

<f7-navbar title="My App" back-link="Back" large title-large="Large Title"></f7-navbar>

全3パーツ

<f7-navbar>
  <f7-nav-left back-link="Back"></f7-nav-left>
  <f7-nav-title>My App</f7-nav-title>
  <f7-nav-right>
    <f7-link icon="icon-bars" panel-open="right"></f7-link>
  </f7-nav-right>
</f7-navbar>

フルカスタムレイアウト

<f7-navbar>
  <f7-nav-left>
    <f7-link>Left Link</f7-link>
  </f7-nav-left>
  <f7-nav-title>My App</f7-nav-title>
  <f7-nav-right>
    <f7-link>Right Link</f7-link>
  </f7-nav-right>
</f7-navbar>