スポンサースポンサーになる

Navbar Vue コンポーネント

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

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

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

プロパティタイプデフォルト説明
<f7-navbar>プロパティ
titlestringNavbarのタイトル
subtitlestringNavbarのサブタイトル
back-linkboolean
string		テキスト付きの戻るリンクを追加します（string値が指定されている場合）
back-link-urlstringカスタム戻るリンクURL
back-link-forcebooleanfalseページを強制的にロードし、履歴内の前のページを無視します
back-link-show-textbooleanデフォルトでは、MDテーマの場合、戻るリンクのテキストは無効になっています
slidingbooleantrueナビ要素の「スライディング」エフェクトを有効にします
outlinebooleantrueiOSテーマの場合、Navbarの下部に薄い境界線（ヘアライン）を追加します
hiddenbooleanfalseNavbarを非表示にします
inner-classstringnavbar-inner要素に追加のクラスを追加します
inner-class-namestringinner-classプロパティのエイリアス
largeboolean大きなタイトル付きのNavbarを有効にします
transparentbooleanNavbarを透明にします。大きなNavbarを透明にするために、largeプロパティと組み合わせて使用できます。
title-largestringNavbarの大きなタイトルテキスト。指定しない場合は、titleプロパティと同じになります
<f7-nav-left>プロパティ
back-linkboolean
string		テキスト付きの戻るリンクを追加します（string値が指定されている場合）
back-link-urlstringカスタム戻るリンクURL
back-link-forcebooleanfalseページを強制的にロードし、履歴内の前のページを無視します
back-link-show-textbooleanデフォルトでは、MDテーマの場合、戻るリンクのテキストは無効になっています
slidingboolean「スライディング」エフェクトを有効にします。デフォルトでは、親f7-navbarのslidingプロパティを継承します
<f7-nav-title>プロパティ
titlestring要素の内側のタイトルテキストを指定します（子要素がない場合に影響します）
subtitlestringサブタイトルテキスト
slidingboolean「スライディング」エフェクトを有効にします。デフォルトでは、親f7-navbarのslidingプロパティを継承します
<f7-nav-right>プロパティ
slidingboolean「スライディング」エフェクトを有効にします。デフォルトでは、親f7-navbarのslidingプロパティを継承します
<f7-navbar>メソッド
.hide(animate)Navbarを非表示にします
.show(animate)Navbarを表示します
.size()Navbarのサイズを調整します
イベント説明
<f7-navbar>イベント
back-click
click:back		Navbarの戻るリンクをクリックした後にイベントがトリガーされます
navbar:hideNavbarが非表示になったときにイベントがトリガーされます
navbar:showNavbarが表示されたときにイベントがトリガーされます
navbar:collapse大きなタイトル付きのNavbarが縮小したとき（大きなNavbarから通常のNavbarに）にイベントがトリガーされます
navbar:expand大きなタイトル付きのNavbarが展開したとき（通常のNavbarから大きなNavbarに）にイベントがトリガーされます
<f7-nav-left>イベント
back-click
click:back		Navbarの戻るリンクをクリックした後にイベントがトリガーされます

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

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

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

例

最小レイアウト

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

<!-- or -->

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

<!-- with different large title text -->

<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>
このドキュメントを改善する
このページについて