导航栏 Vue 组件
导航栏是一个固定的（带有“固定”和“贯穿”布局类型）区域，位于屏幕顶部，包含页面标题和导航元素。
导航栏 Vue 组件表示 导航栏组件。
导航栏组件
包括以下组件
f7-navbarf7-nav-leftf7-nav-rightf7-nav-titlef7-nav-title-large
导航栏属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
| <f7-navbar> 属性 | |||
| 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 | 启用导航元素的“滑动”效果 |
| outline | boolean | true | 对 iOS 主题添加导航栏底部细边框（细线） |
| hidden | boolean | false | 隐藏导航栏 |
| inner-class | string | 向 `navbar-inner` 元素添加额外的类 | |
| inner-class-name | string | `inner-class` 属性的别名 | |
| large | boolean | 启用带有大标题的导航栏 | |
| transparent | boolean | 使导航栏透明。可以与 `large` 属性一起使用，以使较大的导航栏变为透明。 | |
| title-large | string | 导航栏大标题文本。如果未指定，则将等于 `title` 属性 | |
| <f7-nav-left> 属性 | |||
| 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> 属性 | |||
| title | string | 指定元素内部标题文本（影响如果没有子元素的情况） | |
| subtitle | string | 副标题文本 | |
| sliding | boolean | 启用“滑动”效果。默认情况下，继承父 `f7-navbar` 的 `sliding` 属性 | |
| <f7-nav-right> 属性 | |||
| sliding | boolean | 启用“滑动”效果。默认情况下，继承父 `f7-navbar` 的 `sliding` 属性 | |
导航栏方法
| <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 | 单击导航栏返回链接后触发事件 |
导航栏插槽
导航栏 Vue 组件（<f7-navbar>）具有其他插槽，用于自定义元素
default- 元素将作为<div class="navbar-inner">元素的子元素插入before-inner- 元素将立即插入在<div class="navbar-inner">元素之前after-inner- 元素将立即插入在<div class="navbar-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>
<!-- 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>