示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地同层视图
当前示例包含三个同层视图。
自动激活
快速切换适合少量轻量内容。
手动激活
快速切换适合少量轻量内容。
水平标签
维护公开资料。
垂直标签
维护公开资料。
账户设置
编辑个人资料。
使用建议
只切换同层视图
Tabs 适合同一对象下少量并列内容，不代替有先后关系的 Steps，也不代替跨页面主导航。
使用稳定且简短的 item
value 应唯一稳定，label 应短而可扫读；需要延迟激活时显式选择 manual，并完成相应键盘复核。
主动决定面板状态是否持久化
当前只挂载活动面板；需要跨切换保留输入或滚动位置时，把状态提升到宿主或选择其他展示结构。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseTabs } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- 当前仅挂载活动面板，切换会重建面板本地状态；需要保留的状态必须由宿主持有。
- T17 尚缺 single-mounted panel/aria-controls 的 manual keyboard/AT、deterministic visual、packed React 18/19 与 hydration 证据。
- Manual keyboard and assistive-technology review of the single-mounted panel/aria-controls contract, deterministic visual evidence, and final T17/T23 packed React 18/19 and hydration checks remain pending.
API
查看组件源码export interface BaseTabsProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'defaultValue' | 'onChange' | 'style'
> {
items?: BaseTabsItem[];
value?: string;
defaultValue?: string;
orientation?: 'horizontal' | 'vertical';
activationMode?: 'automatic' | 'manual';
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTabsClassNames;
style?: CSSProperties;
onValueChange?: (value: string) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
items | 用于生成组件条目的一组结构化数据。 | BaseTabsItem[] | [] |
value | 当前激活标签页的受控 id。 | string | — |
defaultValue | 非受控模式下使用的初始值。 | string | — |
orientation | 内容或交互项的排列方向。 | 'horizontal' | 'vertical' | 'horizontal' |
activationMode | 标签页获得焦点后自动激活还是需要手动确认。 | 'automatic' | 'manual' | 'automatic' |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTabsClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
onValueChange | 值变化时调用的回调；参数结构以当前组件的 Props 类型为准。 | (value: string) => void | — |