Tabs 标签页

选项卡切换组件，支持线型和卡片两种风格。

基本用法

type="line" 默认线型，选中项底部有跟随滑动的指示条。

用户管理内容

配置管理内容

角色管理内容

vue

<ATabs>
  <ATabPane label="用户管理" name="1">用户管理内容</ATabPane>
  <ATabPane label="配置管理" name="2">配置管理内容</ATabPane>
  <ATabPane label="角色管理" name="3">角色管理内容</ATabPane>
</ATabs>

卡片风格

设置 type="card" 切换为卡片风格标签。

用户管理内容

配置管理内容

角色管理内容

vue

<ATabs type="card">
  <ATabPane label="用户管理" name="1">用户管理内容</ATabPane>
  <ATabPane label="配置管理" name="2">配置管理内容</ATabPane>
  <ATabPane label="角色管理" name="3">角色管理内容</ATabPane>
</ATabs>

可关闭标签

设置 closable 显示关闭按钮。

可关闭标签页内容

点击关闭按钮可移除标签

vue

<ATabs closable @edit="(action, name) => console.log(action, name)">
  <ATabPane label="标签 1" name="1">内容</ATabPane>
  <ATabPane label="标签 2" name="2">内容</ATabPane>
</ATabs>

禁用标签

在 ATabPane 上设置 disabled。

可用内容

禁用内容

可用内容

vue

<ATabs>
  <ATabPane label="可用" name="1">可用内容</ATabPane>
  <ATabPane label="禁用" name="2" disabled>禁用内容</ATabPane>
  <ATabPane label="可用" name="3">可用内容</ATabPane>
</ATabs>

API

Tabs Props

名称	类型	默认值	说明
`modelValue`	`string \| number`	—	当前激活的标签 name
`type`	`'line' \| 'card'`	`'line'`	风格类型
`closable`	`boolean`	`false`	标签是否可关闭
`addable`	`boolean`	`false`	是否显示新增按钮
`tabPosition`	`'top' \| 'left'`	`'top'`	标签位置

Tabs Events

名称	说明
`update:modelValue`	激活标签变化
`tabClick`	点击标签时触发
`edit`	关闭或新增标签时触发，参数 `(action, name?)`

TabPane Props

名称	类型	默认值	说明
`label`	`string`	—	标签标题
`name`	`string \| number`	—	唯一标识
`disabled`	`boolean`	`false`	是否禁用

交互特性

线型标签指示条 spring 弹性跟随
内容切换 fade-in 动画
hover 时关闭按钮渐显
完整 ARIA tab 角色

Tabs 标签页 ​

基本用法 ​

卡片风格 ​

可关闭标签 ​

禁用标签 ​

API ​

Tabs Props ​

Tabs Events ​

TabPane Props ​

交互特性 ​