Navbar Vue组件

Navbar 是屏幕顶部的一个固定区域（具有 Fixed 和 Through 布局类型），包含页面标题和导航元素。

Navbar Vue组件表示导航栏组件。

包含以下组件：

属性类型默认描述
<f7-navbar>属性
title字符串Navbar 标题
subtitle字符串Navbar 子标题
back-link布尔值
字符串		添加带文本的返回链接（如果string值已指定）
back-link-url字符串自定义返回链接 URL
back-link-force布尔值false强制页面加载并忽略历史记录中的上一页
back-link-show-text布尔值默认情况下，返回链接文本在 MD 主题中禁用
sliding布尔值true为导航元素启用“滑动”效果
outline布尔值true为 iOS 主题的导航栏添加底部细边框（细线）
hidden布尔值false使导航栏隐藏
inner-class字符串为navbar-inner元素之前插入元素
inner-class-name字符串别名inner-classprop
large布尔值启用带大标题的导航栏
transparent布尔值使导航栏透明。可与largeprop 结合使用，以使大导航栏透明。
title-large字符串导航栏大标题文本。如果未指定，则等于titleprop
<f7-nav-left>属性
back-link布尔值
字符串		添加带文本的返回链接（如果字符串值已指定）
back-link-url字符串自定义返回链接 URL
back-link-force布尔值false强制页面加载并忽略历史记录中的上一页
back-link-show-text布尔值默认情况下，返回链接文本在 MD 主题中禁用
sliding布尔值启用“滑动”效果。默认情况下继承sliding父级f7-navbar
<f7-nav-title>属性
title字符串指定元素内部标题文本（如果没有子元素则生效）
subtitle字符串子标题文本
sliding布尔值启用“滑动”效果。默认情况下继承sliding父级f7-navbar
<f7-nav-right>属性
sliding布尔值启用“滑动”效果。默认情况下继承sliding父级f7-navbar
<f7-navbar>方法
.hide(animate)隐藏导航栏
.show(animate)显示导航栏
.size()调整导航栏大小
事件描述
<f7-navbar>事件
back-click
click:back		点击导航栏返回链接后触发的事件
navbar:hide导航栏隐藏时触发的事件
navbar:show导航栏可见时触发的事件
navbar:collapse带大标题的导航栏折叠时触发的事件（从大导航栏到普通导航栏）
navbar:expand带大标题的导航栏展开时触发的事件（从普通导航栏到大导航栏）
<f7-nav-left>事件
back-click
click:back		点击导航栏返回链接后触发的事件

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>

三部分全部

<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>
改进此文档
在本页上