NavBar 导航栏
APP
PC
位于 app 内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。
规则
- 可在导航栏中显示当前视图的标题。如果标题非常冗长且无法精简，可以空缺。
- 可在导航栏中使用 SegmentedControl 对内容进行层级划分。
- 避免用过多的元素填满导航栏。一般情况下，一个『返回按钮』、一个『标题』、一个『当前视图的控件』就足够了；如果已经有了 SegmentedControl ，一般只搭配一个『返回按钮』或者『当前视图的控件』。
- 为图标和文字控件，提供更大的点击热区。
引入方式
数字生活网页应用工程中，不需要 import，直接使用组件标签即可。
import {NavBar} from '@21cnfe/vui'
Vue.component('NavBar', NavBar)
|
代码演示
基本用法
mode 可以修改显示模式，导航栏的内容主要通过插槽方式填充
<template>
<NavBar @onLeftClick="onLeftClick" icon="left" mode="light">
title
<span slot="left">left</span>
<span style="display:flex" slot="right">
<div @click="search" style="margin-right:15px;"><Icon type="search"></Icon></div>
<div @click="oparete"><Icon type="ellipsis"></Icon></div>
</span>
</NavBar>
</template>
<script>
export default {
methods: {
onLeftClick () {
console.log('left')
},
search () {
console.log('search')
},
oparete () {
console.log('oparete')
}
}
}
</script>
|
API
| 属性 |
说明 |
类型 |
默认值 |
mode |
模式，可选值dark, light |
String |
dark |
title |
导航栏中间标题 |
String |
-- |
icon |
出现在最左边的图标占位符，传入的字符串为Icon 组件里内置的某个icon的type值 |
String |
-- |
Events
| 事件名称 |
说明 |
回调参数 |
onLeftClick |
导航左边点击回调 |
-- |
Slot
| 属性 |
说明 |
left |
填充导航栏左边部分 |
right |
填充导航栏右边部分 |
