# Tabs标签页

# ✨简单用法

用户管理 配置管理 角色管理 用户管理相关内容 配置管理相关内容 角色管理相关内容
<template>
  <div>
      <wb-tabs :selected.sync="selectedTab">
          <wb-tabs-nav>
              <template slot="actions"><button>设置</button></template>
              <wb-tabs-item name="user">
                  用户管理
              </wb-tabs-item>
              <wb-tabs-item name="config">
                  <wb-icon icon="settings"></wb-icon>
                  配置管理
              </wb-tabs-item>
              <wb-tabs-item name="role" disabled>
                  角色管理
              </wb-tabs-item>
          </wb-tabs-nav>
          <wb-tabs-content>
              <wb-tabs-pane name="user">用户管理相关内容</wb-tabs-pane>
              <wb-tabs-pane name="config">配置管理相关内容</wb-tabs-pane>
              <wb-tabs-pane name="role">角色管理相关内容</wb-tabs-pane>
          </wb-tabs-content>
      </wb-tabs>
  </div>
</template>
<script>
export default {
    data(){
        return{
            selectedTab:'user',
        }
    }
}
</script>

显示代码 复制代码

# 📌 Tabs Attributes

参数
说明
类型
可选值
默认值
selected 默认选中的标签 string

# 📌 Tabs-item Attributes

参数
说明
类型
可选值
默认值
name 选项卡标题 string
disabled 是否禁用 boolean false

# 📌 Tabs-pane Attributes

参数
说明
类型
可选值
默认值
name 选项卡标题 string