辅助导航栏 Vue 组件

当需要将任何其他元素放入导航栏时，例如选项卡链接或搜索栏时，辅助导航栏十分有用。当导航栏隐藏时，它也会保持可见。

辅助导航栏 Vue 组件表示辅助导航栏组件。

辅助导航栏组件

包括以下组件

f7-subnavbar

辅助导航栏属性

属性	类型	默认值	描述
<f7-subnavbar> 属性
sliding	布尔值		启用“滑动”效果
title	字符串		辅助导航栏标题
inner	布尔值	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>

改善此文档

在此页面

辅助导航栏组件
辅助导航栏属性
示例