Navbar

顶部选项卡。

WARNING

本组件将在下一个大版本中正式废弃,请使用 Tabs 组件替代。

引入

import { Navbar, NavbarItem } from 'we-vue'

Vue.use(Navbar)
Vue.use(NavbarItem)
1
2
3
4

例子

基本示例

<template>
  <wv-navbar v-model="selected" @change="changed" fixed>
    <wv-navbar-item id="item1">选项1</wv-navbar-item>
    <wv-navbar-item id="item2">选项2</wv-navbar-item>
    <wv-navbar-item id="item3">选项3</wv-navbar-item>
  </wv-navbar>
</template>
1
2
3
4
5
6
7

自定义激活项颜色

<template>
  <wv-navbar v-model="selected" @change="changed" active-color="red">
    <wv-navbar-item id="item1">选项1</wv-navbar-item>
    <wv-navbar-item id="item2">选项2</wv-navbar-item>
    <wv-navbar-item id="item3">选项3</wv-navbar-item>
  </wv-navbar>
</template>
1
2
3
4
5
6
7

自定义激活指示线宽度

<template>
  <wv-navbar v-model="selected" @change="changed" :line-width="1">
    <wv-navbar-item id="item1">选项1</wv-navbar-item>
    <wv-navbar-item id="item2">选项2</wv-navbar-item>
    <wv-navbar-item id="item3">选项3</wv-navbar-item>
  </wv-navbar>
</template>
1
2
3
4
5
6
7

禁用过渡动效 (v1.4.14 以上版本)

<template>
  <wv-navbar v-model="selected" @change="changed" :animate="false">
    <wv-navbar-item id="item1">选项1</wv-navbar-item>
    <wv-navbar-item id="item2">选项2</wv-navbar-item>
    <wv-navbar-item id="item3">选项3</wv-navbar-item>
  </wv-navbar>
</template>
1
2
3
4
5
6
7

有禁用项

<template>
  <wv-navbar v-model="selected" @change="changed">
    <wv-navbar-item id="item1">选项1</wv-navbar-item>
    <wv-navbar-item id="item2">选项2</wv-navbar-item>
    <wv-navbar-item id="item3" :disabled="disabled">选项3</wv-navbar-item>
  </wv-navbar>
</template>
1
2
3
4
5
6
7

API

  • navbar
参数 类型 说明 可选值 默认值
fixed Boolean 是否固定 false
color String 选项卡字色 '#333'
background-color String 选项卡背景色 '#fff'
active-color String 激活的选项卡项字色 '#2196f3'
disabled-color String 禁用的选项卡项字色 '#cfcfcf'
line-width Number 询问衬级宽度 2
animate (v1.4.14 新增) Boolean 是否禁用过渡动效 false
  • navbar-item
参数 类型 说明 可选值 默认值
id String 选项卡项 ID
disabled Boolean 是否禁用 false

Slots

  • navbar
name 描述
- 一个或多个 navbar-item 组件
  • navbar-item
name 描述
- 选项卡项内容
中国联通
20.45