- 开始使用
- Vue 组件
Navbar Vue组件
Navbar 是屏幕顶部的一个固定区域（具有 Fixed 和 Through 布局类型），包含页面标题和导航元素。
Navbar Vue组件表示导航栏组件。
Navbar 组件
包含以下组件：
f7-navbarf7-nav-leftf7-nav-rightf7-nav-titlef7-nav-title-large
Navbar 属性
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
| <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 | |
Navbar 方法
| <f7-navbar>方法 | |
|---|---|
| .hide(animate) | 隐藏导航栏 |
| .show(animate) | 显示导航栏 |
| .size() | 调整导航栏大小 |
Navbar 事件
| 事件 | 描述 |
|---|---|
| <f7-navbar>事件 | |
| back-click click:back | 点击导航栏返回链接后触发的事件 |
| navbar:hide | 导航栏隐藏时触发的事件 |
| navbar:show | 导航栏可见时触发的事件 |
| navbar:collapse | 带大标题的导航栏折叠时触发的事件（从大导航栏到普通导航栏） |
| navbar:expand | 带大标题的导航栏展开时触发的事件（从普通导航栏到大导航栏） |
| <f7-nav-left>事件 | |
| back-click click:back | 点击导航栏返回链接后触发的事件 |
Navbar 插槽
Navbar 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>