サブナビゲーションバー Vue コンポーネント

サブナビゲーションバーは、タブリンクや検索バーなどの追加要素をナビゲーションバーに追加する必要がある場合に役立ちます。また、ナビゲーションバーが非表示の場合でも表示されたままです。

サブナビゲーションバー Vue コンポーネントは、サブナビゲーションバーコンポーネントを表します。

サブナビゲーションバーコンポーネント

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

f7-subnavbar

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

プロパティ	型	デフォルト	説明
<f7-subnavbar> プロパティ
sliding	boolean		"スライド"効果を有効にします
title	string		サブナビゲーションバーのタイトル
inner	boolean	true	有効にすると、追加の "subnavbar-inner" ラッパー要素が追加されます

例

subnavbar.vue

<template>
  <f7-page>
    <f7-navbar title="Subnavbar">
      <f7-subnavbar>
        <f7-segmented strong>
          <f7-button small-md active>Link 1</f7-button>
          <f7-button small-md>Link 2</f7-button>
          <f7-button small-md>Link 3</f7-button>
        </f7-segmented>
      </f7-subnavbar>
    </f7-navbar>
    <f7-block>
      <p>
        Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links
        or Search Bar. It also remains visible when Navbar hidden.
      </p>
    </f7-block>
    <f7-list strong outline-ios>
      <f7-list-item link="/subnavbar-title/" title="Subnavbar Title"></f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Subnavbar,
  f7Segmented,
  f7Button,
  f7Block,
  f7List,
  f7ListItem,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Subnavbar,
    f7Segmented,
    f7Button,
    f7Block,
    f7List,
    f7ListItem,
  },
};
</script>

subnavbar-title.vue

<template>
  <f7-page>
    <f7-navbar>
      <f7-subnavbar title="Page Title"></f7-subnavbar>
    </f7-navbar>
    <f7-block>
      <p>
        It also possible to use Subnavbar to display page title and keep navbar only for actions.
      </p>
    </f7-block>
    <f7-block>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, consequatur quia amet
        voluptate vero quasi, veniam, quisquam dolorum magni sint enim, harum expedita excepturi
        quas iure magnam minus voluptatem quaerat!
      </p>
      <p>
        Dolore laboriosam error magnam velit expedita recusandae, dolor asperiores unde, sint,
        veritatis illum ipsum? Nulla ratione nobis, ullam debitis. Inventore sapiente rem dolore eum
        ipsa totam perspiciatis cupiditate, amet maiores!
      </p>
      <p>
        Ratione quod minus ipsum maxime cum voluptate molestiae adipisci placeat ut illo, alias
        nobis perferendis magni odio sunt, porro, totam praesentium possimus! Autem inventore ut
        provident animi quae, impedit id!
      </p>
      <p>
        Aperiam ea ab harum. Quis dolorem cupiditate, incidunt mollitia ducimus voluptatem commodi!
        Odio quasi amet hic nesciunt, quibusdam, est vero repellat sapiente perferendis, optio
        laboriosam in culpa veniam alias ad.
      </p>
      <p>
        A fuga corporis harum velit maiores, quaerat accusantium cum aspernatur consequuntur dolor
        vel fugit omnis est dolorum delectus debitis aperiam distinctio eveniet vero nihil
        voluptatum culpa. Accusamus aliquid facere tenetur?
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Block, f7Subnavbar } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7Subnavbar,
  },
};
</script>

このドキュメントを改善する

このページについて

サブナビゲーションバーコンポーネント
サブナビゲーションバープロパティ
例

サブナビゲーションバー Vue コンポーネント

サブナビゲーションバーコンポーネント

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

例

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