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