Tabs
标签页，在同一区域内组织并切换多组对等内容。全量对齐 Semi Design：支持 line/card/button/slash 类型、top/left 位置、small/medium/large 尺寸、数据驱动 tabList 或纯声明式 <Tabs.Pane> 自动收集、renderTabBar 自定义标签栏、roving tabindex 键盘导航、可关闭标签、more 收纳与 collapsible 滚动折叠（含 auto 自动检测）。
如何引入
import { Tabs } from '@chenzy-design/svelte';基础用法
activeKey 受控，onChange 回调返回新 key；默认选中第一项。
chenzy-design 是一套对齐 Semi Design 的 Svelte 组件库，帮助开发者更容易地打造高质量、 体验一致、符合设计规范的 Web 应用。
pnpm add @chenzy-design/svelte遇到问题？欢迎在仓库提 issue 反馈。
类型
支持 line / card / button / slash 四种视觉风格。
line（线条式，默认）
文档内容
快速起步内容
帮助内容
card（卡片式）
文档内容
快速起步内容
帮助内容
button（按钮式）
slash（斜线式）
文档内容
快速起步内容
帮助内容
尺寸
small / medium / large 三档，默认 large。
large（默认）
文档内容
快速起步内容
帮助内容
medium
文档内容
快速起步内容
帮助内容
small
文档内容
快速起步内容
帮助内容
带图标
每个 Tab 可在文字前渲染图标（<Tabs.Pane icon={...}> 或 tabList 的 TabItem.icon）。
文档内容
快速起步内容
帮助内容
更多收入 More
more 传数字，把末尾若干 Tab 收入「更多」下拉。
Content of card tab 0
Content of card tab 1
Content of card tab 2
Content of card tab 3
Content of card tab 4
Content of card tab 5
Content of card tab 6
Content of card tab 7
Content of card tab 8
Content of card tab 9
More 高级配置
more 传对象：count 控数量、render 自定义触发器、dropdownProps 透传下拉参数。
Content of card tab 0
Content of card tab 1
Content of card tab 2
Content of card tab 3
Content of card tab 4
Content of card tab 5
Content of card tab 6
Content of card tab 7
Content of card tab 8
Content of card tab 9
垂直标签栏
tabPosition="left" 竖向标签栏，支持 line / card / button 三型。
文档
chenzy-design 竖向标签栏，标签在左、内容在右。
快速起步
pnpm add @chenzy-design/svelte
帮助
欢迎提 issue 反馈。
滚动折叠
collapsible 横向溢出时显示前/后切换箭头，可滚动查看被裁切的标签。
Content of card tab 0
Content of card tab 1
Content of card tab 2
Content of card tab 3
Content of card tab 4
Content of card tab 5
Content of card tab 6
Content of card tab 7
Content of card tab 8
Content of card tab 9
自定义滚动箭头
renderArrow 自定义折叠模式下的前/后切换箭头渲染。
Content of card tab 0
Content of card tab 1
Content of card tab 2
Content of card tab 3
Content of card tab 4
Content of card tab 5
Content of card tab 6
Content of card tab 7
Content of card tab 8
Content of card tab 9
箭头位置
arrowPosition 控制折叠切换箭头渲染位置：start / both / end。
arrowPosition="start"
Content of card tab 0
Content of card tab 1
Content of card tab 2
Content of card tab 3
Content of card tab 4
Content of card tab 5
Content of card tab 6
Content of card tab 7
Content of card tab 8
Content of card tab 9
arrowPosition="both"
Content of card tab 0
Content of card tab 1
Content of card tab 2
Content of card tab 3
Content of card tab 4
Content of card tab 5
Content of card tab 6
Content of card tab 7
Content of card tab 8
Content of card tab 9
arrowPosition="end"
Content of card tab 0
Content of card tab 1
Content of card tab 2
Content of card tab 3
Content of card tab 4
Content of card tab 5
Content of card tab 6
Content of card tab 7
Content of card tab 8
Content of card tab 9
自动溢出检测
collapsible="auto" 自动检测溢出，溢出才折叠，容器变宽/标签变少能全显时自动退出。
当前 Tab 数量：8
固定宽度 400px 容器
Content of Tab 1
Content of Tab 2
Content of Tab 3
Content of Tab 4
Content of Tab 5
Content of Tab 6
Content of Tab 7
Content of Tab 8
禁用
禁用标签栏中的某一个标签页。
文档内容
（已禁用，无法切换）
帮助内容
标签栏内容扩展
tabBarExtraContent 在标签栏右侧添加附加操作。
文档内容
快速起步内容
帮助内容
标签栏二次封装
renderTabBar 完全自绘标签栏；面板内容仍按 activeKey 显隐。
二次封装的标签栏，当前 activeKey：1
文档内容
快速起步内容
帮助内容
动态更新
通过绑定事件动态增删标签页。
Content of Tab Pane 1
Content of Tab Pane 2
关闭
卡片样式支持关闭；单项 closable 控制是否可关，onTabClose 由父组件移除。
文档
快速起步
帮助
数据驱动 tabList
传 tabList 数组定义标签，内容由单节点按 activeKey 渲染（对齐 Semi 每次只渲染当前项）。
文档内容
keepDOM / lazyRender
keepDOM（默认 true）保留隐藏面板 DOM；lazyRender 仅激活过才挂载。
文档内容
快速起步内容
帮助内容
API 参考
Tabs
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
activeKey | 受控选中标签 key（对齐 Semi） | string|number | undefined |
defaultActiveKey | 非受控初始 key（对齐 Semi） | string|number | 首个标签 |
type | 视觉风格（button=分段按钮组，slash=斜线式仅横向） | 'line'|'card'|'button'|'slash' | line |
size | 尺寸档（对齐 Semi） | 'small'|'medium'|'large' | large |
tabPosition | 标签栏位置：top 水平 / left 垂直（对齐 Semi；slash 仅 top） | 'top'|'left' | top |
lazyRender | 懒渲染：仅当面板激活过才挂载进 DOM（对齐 Semi） | boolean | false |
keepDOM | 使用 TabPane 写法时是否渲染隐藏面板的 DOM（对齐 Semi） | boolean | true |
tabList | 数据驱动标签定义；不传则从子 <Tabs.Pane> 的 tab/itemKey/icon/disabled/closable 纯声明式自动收集。TabItem 支持 icon?: Snippet（标签文字前渲染的图标） | TabItem[] | undefined |
closable | 全局可关闭（单项可覆盖） | boolean | false |
collapsible | 滚动折叠（对齐 Semi）：true 溢出时显示前/后切换箭头；auto 自动检测溢出再决定是否折叠（仅横向生效） | boolean | 'auto' | false |
more | 把末尾若干标签收进「更多」下拉（对齐 Semi）：数字简写或对象形式（count/render/dropdownProps） | number | { count?: number; render?: Snippet; dropdownProps?: object } | undefined |
arrowPosition | collapsible 折叠模式中前/后切换箭头位置 | 'start'|'end'|'both' | both |
renderArrow | collapsible 折叠模式下自定义前/后切换箭头 | Snippet<[{ type: 'start'|'end'; onClick: () => void }]> | undefined |
showRestInDropdown | more 收纳模式是否在下拉中展示收起 tabs | boolean | true |
dropdownProps | 折叠模式下透传下拉参数（对齐 Semi）：start=前箭头下拉，end=末尾「更多」下拉 | { start?: object; end?: object } | undefined |
onVisibleTabsChange | dropdown 模式下溢出项变化时回调，携带当前可见 tab keys | (visibleTabKeys: (string|number)[]) => void | undefined |
contentStyle | 内容区外层样式（string 或 CSSProperties 对象） | string | Record<string, string> | undefined |
preventScroll | Tab 聚焦时是否阻止页面滚动 | boolean | false |
tabPaneMotion | 面板切换是否启用动画 | boolean | true |
tabBarExtraContent | 标签栏右侧额外内容 | Snippet | undefined |
tabBarClassName | 标签栏容器（.cd-tabs__bar）自定义 class | string | undefined |
tabBarStyle | 标签栏容器（.cd-tabs__bar）自定义样式 | string | Record<string, string> | undefined |
visibleTabsStyle | 可见标签区域自定义样式（scroll 模式作用于 .cd-tabs__nav，dropdown 模式作用于 .cd-tabs__list） | string | Record<string, string> | undefined |
onChange | — | (key: string|number) => void | undefined |
onTabClose | — | (key: string|number) => void | undefined |
onTabClick | 标签被点击触发（含已选中标签，未必触发 onChange；disabled 拦截前发出，可用于埋点） | (key: string|number, event: MouseEvent) => void | undefined |
renderTabBar | 自定义整个标签栏渲染（接收 tab 列表、当前激活 key、切换回调 setActive）；传入时跳过内置标签栏与溢出处理，面板内容仍按 activeKey 显隐 | Snippet<[TabItem[], string|number|undefined, (key) => void]> | undefined |
children | 声明式 TabPane 内容（<Tabs.Pane>），<Tabs.Pane> 支持 icon?: Snippet（标签文字前渲染的图标） | Snippet | undefined |
Accessibility
| ARIA role | tablist |
| 键盘交互 | ArrowLeftArrowRightArrowUpArrowDownHomeEndEnterSpace |
- tablist 内每个标签为 role=tab，aria-selected 标记激活，aria-controls 关联面板
- roving tabindex：仅激活标签 tabindex=0，其余 -1
- 对齐 Semi 手动激活：方向键仅移动焦点，Enter/Space 或点击才激活对应面板
- 面板 role=tabpanel；关闭叉为带 aria-label 的原生 button
- 标签溢出时出现前/后滚动箭头（带 aria-label，tabindex=-1 不入 Tab 序），激活标签自动滚到可视区
- more 收纳时溢出标签收进末尾「更多」下拉（aria-haspopup=menu，带 aria-label），激活标签始终保持可见
- renderTabBar 自定义标签栏时由调用方负责无障碍语义（role=tab/aria-selected 等）
- preventScroll=true 时 Tab 聚焦不触发页面滚动
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-tabs-tab-button-bg-active | var(--cd-color-fill-1) | 按钮式页签背景颜色 - 按下 |
--cd-color-tabs-tab-button-bg-hover | var(--cd-color-fill-0) | 按钮式页签背景颜色 - 悬浮 |
--cd-color-tabs-tab-button-selected-bg-default | var(--cd-color-primary-light-default) | 按钮式页签背景颜色 - 选中 |
--cd-color-tabs-tab-button-selected-text-default | var(--cd-color-primary) | 按钮式页签文本颜色 - 选中 |
--cd-color-tabs-tab-button-text-default | var(--cd-color-text-2) | 按钮式页签文本颜色 - 默认 |
--cd-color-tabs-tab-card-bg-active | var(--cd-color-fill-1) | 卡片式页签背景颜色 - 按下 |
--cd-color-tabs-tab-card-bg-hover | var(--cd-color-fill-0) | 卡片式页签背景颜色 - 悬浮 |
--cd-color-tabs-tab-card-border-default | var(--cd-color-border) | 卡片式页签容器底部长线颜色 - 默认 |
--cd-color-tabs-tab-card-selected-bg-default | var(--cd-color-bg-1) | 卡片式页签背景颜色 - 选中 |
--cd-color-tabs-tab-card-selected-indicator-default | var(--cd-color-border) | 卡片式页签选中页签描边 |