Tabs 标签页

选项卡切换组件，支持 line、segment 两种风格，以及顶部和左侧两种布局。

线条（line）

默认风格，带动画下划线指示器。

文档

示例

更新日志

这里是文档内容区域。

下划线风格

vue

<script setup lang="ts">
import { ATabs } from "@lite-code/aui-vue";

const items = [
  { key: "1", label: "文档", children: "这里是文档内容区域。" },
  { key: "2", label: "示例", children: "这里是示例代码区域。" },
  { key: "3", label: "更新日志", children: "这里是更新日志区域。" },
];
</script>

<template>
  <ATabs :items="items" default-active-key="1" />
</template>

分段（segment）

iOS 风格分段控制器，滑块跟随激活项。

日

周

月

年

分段控制器

vue

<script setup lang="ts">
import { ATabs } from "@lite-code/aui-vue";

const items = [
  { key: "day", label: "日" },
  { key: "week", label: "周" },
  { key: "month", label: "月" },
  { key: "year", label: "年" },
];
</script>

<template>
  <ATabs :items="items" type="segment" default-active-key="week" />
</template>

左侧布局

设置 position="left"，标签排列在左侧，内容展示在右侧。

文档

示例

更新日志

这里是文档内容区域。

左侧标签

vue

<script setup lang="ts">
import { ATabs } from "@lite-code/aui-vue";

const items = [
  { key: "1", label: "文档", children: "这里是文档内容区域。" },
  { key: "2", label: "示例", children: "这里是示例代码区域。" },
  { key: "3", label: "更新日志", children: "这里是更新日志区域。" },
];
</script>

<template>
  <ATabs :items="items" position="left" default-active-key="1" />
</template>

超出滚动

标签数量超出容器宽度时，两侧自动出现箭头按钮，支持点击滚动和拖拽滚动。

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

Tab 7

Tab 8

Tab 9

Tab 10

Tab 11

Tab 12

Tab 13

Tab 14

Tab 15

Tab 16

Tab 17

Tab 18

Tab 19

Tab 20

Tab 1 的内容区域。

超出滚动

vue

<script setup lang="ts">
import { ATabs } from "@lite-code/aui-vue";

const items = Array.from({ length: 20 }, (_, i) => ({
  key: String(i + 1),
  label: `Tab ${i + 1}`,
  children: `Tab ${i + 1} 的内容区域。`,
}));
</script>

<template>
  <ATabs :items="items" default-active-key="1" />
</template>

禁用

可用

禁用

可用

可用标签的内容

禁用标签页

vue

<script setup lang="ts">
import { ATabs } from "@lite-code/aui-vue";

const items = [
  { key: "1", label: "可用", children: "可用标签的内容" },
  { key: "2", label: "禁用", disabled: true, children: "禁用标签" },
  { key: "3", label: "可用", children: "另一个可用标签的内容" },
];
</script>

<template>
  <ATabs :items="items" default-active-key="1" />
</template>

API

Props

属性	类型	默认值	说明
items	TabItem[]	—	标签页数据（必填）
activeKey	string	—	当前激活 key（受控）
defaultActiveKey	string	第一项	初始激活 key（非受控）
type	'line' | 'segment'	'line'	标签页风格
position	'top' | 'left'	'top'	标签排列位置
class	string	—	自定义类名
style	object	—	自定义样式

Events

事件	说明
update:activeKey	切换时触发，支持 v-model
change	切换时触发

TabItem

属性	类型	说明
key	string	唯一标识
label	string	标签文字
children	any	面板内容
disabled	boolean	是否禁用
icon	any	标签前置图标