ivyDesign

Appearance

Tab 标签页 ​

分隔内容上有关联但属于不同类别的数据集合。

基础用法 ​

最常见的用法

用户管理 配置管理 角色管理 权限管理
html
<ivy-tabs>
  <ivy-tab-pane label="用户管理"> 用户管理 </ivy-tab-pane>
  <ivy-tab-pane label="配置管理"> 配置管理 </ivy-tab-pane>
  <ivy-tab-pane label="角色管理"> 角色管理 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理 </ivy-tab-pane>
</ivy-tabs>

禁用 ​

禁止标签页的点击

用户管理 配置管理 角色管理 权限管理
html
<ivy-tabs>
  <ivy-tab-pane label="用户管理"> 用户管理 </ivy-tab-pane>
  <ivy-tab-pane label="配置管理"> 配置管理 </ivy-tab-pane>
  <ivy-tab-pane label="角色管理" disabled> 角色管理 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理 </ivy-tab-pane>
</ivy-tabs>

标识 ​

每个 ivy-tab-pane 需要指定一个唯一标识 index，没有会默认以序列号为 index,

active 作用在 ivy-tabs 上，可以指定切换到具体标签页，也可以指定初始值。

跳转到-权限管理 用户管理 配置管理 角色管理 权限管理
html
<ivy-tabs active="b" id="tab3">
  <ivy-tab-pane label="用户管理" index="a"> 用户管理 </ivy-tab-pane>
  <ivy-tab-pane label="配置管理" index="b"> 配置管理 </ivy-tab-pane>
  <ivy-tab-pane label="角色管理" index="c"> 角色管理 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理" index="d"> 权限管理 </ivy-tab-pane>
</ivy-tabs>
<ivy-button
  type="success"
  onclick="document.getElementById('tab3').setActive('d')"
>
  跳转到-权限管理
</ivy-button>

其他 ​

当 tab-pane 比较多时，两次会会出现按钮，点击按钮可以左右滚动。

用户管理 配置管理 角色管理 权限管理 权限管理1 权限管理2 权限管理3 权限管理4 权限管理5 权限管理6 权限管理7 权限管理8 权限管理9
html
<ivy-tabs active="2" id="tab1">
  <ivy-tab-pane label="用户管理"> 用户管理 </ivy-tab-pane>
  <ivy-tab-pane label="配置管理"> 配置管理 </ivy-tab-pane>
  <ivy-tab-pane label="角色管理"> 角色管理 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理1 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理2 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理3 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理4 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理5 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理6 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理7 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理8 </ivy-tab-pane>
  <ivy-tab-pane label="权限管理"> 权限管理9 </ivy-tab-pane>
</ivy-tabs>

Tabs Props ​

参数说明类型可选值默认值
active绑定值，选中选项卡的 indexstring—-

Tabs Events ​

事件名称说明类型
changeactive 改变时触发Function

TabPane Props ​

参数说明类型可选值默认值
label名称string—-
index唯一标识string—-
disabled是否禁用boolean—-