组件

OneTabs

OneTabs 根据 OneTabItem.value 匹配同名动态插槽；value 用于受控状态，defaultValue 用于非受控初始状态。

概览内容

查看代码收起代码

import { OneTabs } from '@geektech/one';

new OneTabs({
  defaultValue: 'overview',
  items: [
    { value: 'overview', label: '概览' },
    { value: 'security', label: '安全' },
  ],
  children: [
    { tag: 'p', slot: 'overview', children: ['概览内容'] },
    { tag: 'p', slot: 'security', children: ['安全内容'] },
  ],
});

键盘与 ARIA

标签列表使用 role=tablist，标签和面板通过 aria-controls 与 aria-labelledby 关联。ArrowLeft、ArrowRight 会循环移动并激活，Home 和 End 跳到首尾可用标签。

API

OneTabsProps
名称	签名	说明
`items`	`items: readonly OneTabItem[]`	标签项；重复 value 只保留第一项。
`value`	`value?: string`	受控选中值。
`defaultValue`	`defaultValue?: string`	非受控初始值。
`id`	`id?: string`	稳定的标签与面板 ID 前缀。
`ariaLabel`	`ariaLabel?: string`	tablist 的可访问名称。
`children`	`children?: Array<VNode \| string>`	slot 名与 item.value 相同的动态面板内容。

OneTabItem 与事件
名称	签名	说明
`OneTabItem`	`{ value: string; label: string; disabled?: boolean }`	标签项公开类型。
`change`	`(event: OneTabsChangeEvent) => void`	事件包含 value: string 与 originalEvent: Event。