Tabs 标签页

示例

尺寸

可选的 ui 尺寸属性值：s / m / l。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-tabs
    ui="l"
    :active.sync="active"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>

  <veui-tabs
    :active.sync="active"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>

  <veui-tabs
    ui="s"
    :active.sync="active"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
      status="success"
    />
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers'
    }
  }
}
</script>

样式

设置 ui 为 simple / strong 来分别启用简单样式、加强样式。

Simple style

Strong style

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <h4>Simple style</h4>
    <veui-tabs
      ui="simple"
      :active.sync="active"
    >
      <veui-tab
        label="回答问题"
        name="answers"
      />
      <veui-tab
        label="文章评论"
        name="articles"
        status="error"
      />
      <veui-tab
        label="分享朋友圈"
        name="shares"
      />
    </veui-tabs>
  </section>
  <section>
    <h4>Strong style</h4>
    <veui-tabs
      ui="strong"
      :active.sync="active"
    >
      <veui-tab
        label="回答问题"
        name="answers"
        status="warning"
      />
      <veui-tab
        label="文章评论"
        name="articles"
      />
      <veui-tab
        label="分享朋友圈"
        name="shares"
      />
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers'
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

路由模式

设置 Tab 组件 to 属性来使用路由模式。

Tab content #1
在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-tabs :active="$route.fullPath">
    <veui-tab
      label="Tab 1"
      to="/components/tabs/tab"
    />
    <veui-tab
      label="Tab 2"
      to="/components/tabs/tab2"
    />
    <veui-tab
      label="Tab 3 (custom panel slot)"
      to="/components/tabs/tab3"
    >
      <h3>Tab Header</h3>
      <router-view/>
      <footer>Tab footer</footer>
    </veui-tab>
    <veui-tab
      label="Redirect to Form"
      to="/components/form"
    />
    <template #panel>
      <router-view/>
    </template>
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers',
      index: 0
    }
  }
}
</script>

禁用状态

设置 Tab 组件 disabled 属性来使选项卡处于禁用状态。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-tabs :index.sync="index">
    <veui-tab label="Tab1">
      <p>This is Tab1</p>
    </veui-tab>
    <veui-tab
      label="Tab2"
      disabled
    >
      <p>This is Tab2</p>
    </veui-tab>
    <veui-tab label="Tab3">
      <p>This is Tab3</p>
    </veui-tab>
    <veui-tab label="Tab4">
      <p>This is Tab4</p>
    </veui-tab>
  </veui-tabs>
  <veui-tabs
    ui="strong"
    :index.sync="index"
  >
    <veui-tab label="Tab1">
      <p>This is Tab1</p>
    </veui-tab>
    <veui-tab
      label="Tab2"
      disabled
    >
      <p>This is Tab2</p>
    </veui-tab>
    <veui-tab label="Tab3">
      <p>This is Tab3</p>
    </veui-tab>
    <veui-tab label="Tab4">
      <p>This is Tab4</p>
    </veui-tab>
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      index: 0
    }
  }
}
</script>

API

属性

名称类型默认值描述
uistring=-

预设样式。

值描述
s小尺寸样式。
m中尺寸样式。
l大尺寸样式。
simple简单样式。
strong加强样式。
activestring-

.sync

表示当前哪个标签页处于激活状态。具体映射的值受标签的属性影响，优先级 to > name。

matchesfunction(Route, Route): booleantabs.matches

用于给内部的 Tab 组件设置统一的路由匹配逻辑。具体参见 Tab 组件的 to 属性。

addablebooleanfalse是否可以增加标签。
maxnumber-可增加标签的上限值。
tipstring-提示文本。
add-labelstring=-“添加”按钮的文字内容。
eagerbooleanfalse是否立即渲染所有非当前激活项的标签面板内容（并隐藏）。

插槽

名称描述
default允许直接内联 Tab 组件。无默认内容。
panel选项卡下方面板区域。
extra位于标签页右侧的扩展区域。
tab-item

标签选项卡区域，默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。

名称类型描述
labelstring选项卡文本。
namestring选项卡名称。
disabledboolean=选项卡是否禁用。
tostring选项卡路由信息。
activeboolean选项卡是否是激活项。
indexnumber选项卡位于列表中的索引值。
nativeboolean路由模式是否强制使用原生的 <a> 元素。
removableboolean是否可删除。
statusstring选项卡状态。
attrsObject<string, string>其它需要输出到选项卡元素上的 HTML 属性，例如 role / aria-selected / aria-controls 等。
activatefunction(): void激活当前选项卡的方法。
tab-label标签选项卡文本区域，默认内容为选项卡文本。作用域参数同 tab-item 插槽，attrs / activate 除外。

事件

名称描述
change切换时触发。回调参数为 (tab: Object)，tab 与 tab-label 插槽中的作用域参数一致。
add点击添加按钮触发的事件，无回调参数。
remove删除标签时触发的事件。回调参数为 (tab: Object)，tab 与 tab-label 插槽中的作用域参数一致。

全局配置

名称类型默认值描述
tabs.matchesfunction见描述。

函数签名与 Tab 组件的 to 属性相同。默认值为：

function (current, to) {
  return current.fullPath === to.fullPath
}

图标

名称描述
add添加按钮。
remove清除按钮。
prev往左翻页按钮。
next往右翻页按钮。
success成功状态。
warning警示状态。
info普通信息状态。
error错误状态。
在 GitHub 上编辑此页编辑