Navbar

顶部选项卡。

WARNING

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

引入

  1. import { Navbar, NavbarItem } from 'we-vue'
  2. Vue.use(Navbar)
  3. Vue.use(NavbarItem)

例子

基本示例

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

自定义激活项颜色

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

自定义激活指示线宽度

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

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

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

有禁用项

<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>

API

  • navbar

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

    参数类型说明可选值默认值
    idString选项卡项 ID
    disabledBoolean是否禁用false

Slots

  • navbar

    name描述
    -一个或多个 navbar-item 组件
  • navbar-item

    name描述
    -选项卡项内容