Tabs 标签页
Navigation
智能自动检测
Introduction
一个视觉布局组件，将密集的相关信息组织到多个互斥的面板中。用户无需加载新页面或弄乱画布，即可在面板间无缝切换。
Tabs 组件已作为 tabs 区块完全集成到 Page Builder 中，使作者能够轻松构建选项卡视图、配置视觉属性并直接在模板中排列嵌套区块。
Usage
以下配置精确展现了 page-builder 区块项的构建方式。
1. 经典横向选项卡（Line 变体）
我们的标准布局，带有下划线触发指示器和流畅的滑动过渡。非常适合标准产品功能、详情或文档子菜单。
{
"type": "tabs",
"variant": "line",
"size": "md",
"items": [
{
"value": "features",
"label": "⚡ Key Features",
"content": [
{
"type": "text",
"content": "Our Hono/JSX Tabs component supports zero runtime styled-system classes, smooth sliding indicator transitions, and native keyboard interaction."
}
]
},
{
"value": "pricing",
"label": "💎 Pricing Plans",
"content": [
{
"type": "text",
"content": "Flexible subscription pricing for individuals, start-ups, and scaling enterprise workspaces."
}
]
}
]
}
Our Hono/JSX Tabs component supports zero runtime styled-system classes, smooth sliding indicator transitions, and native keyboard interaction.
2. 封闭文件夹样式（紧凑尺寸）
以带边框的按钮外壳渲染选项卡列表，类似文件夹分隔符。非常适合仪表盘菜单、界面偏好或紧凑设置区。
{
"type": "tabs",
"variant": "enclosed",
"size": "sm",
"items": [
{
"value": "profile",
"label": "User Profile",
"content": [
{
"type": "text",
"content": "Manage personal information, billing details, and customized regional preferences."
}
]
},
{
"value": "security",
"label": "Security",
"content": [
{
"type": "text",
"content": "Configure multi-factor authentication codes, view active sessions, and update credentials."
}
]
}
]
}
Manage personal information, billing details, and customized regional preferences.
Props
| 属性 | CMS 字段类型 | 默认值 | 描述 / 支持的选项 |
|---|---|---|---|
选项卡项 (items) | list | - | 选项卡区块数组。每项需唯一 value（用于键跟踪）、label 文本以及包含子布局节点的 content 区块列表。 |
视觉变体 (variant) | select | "line" | 视觉外观风格。 • "line" — 带下划线滑动指示器的最小文本触发器。 • "subtle" — 带阴影圆角背景的标签。 • "enclosed" — 传统带边框文件夹选项卡设计。 |
尺寸比例 (size) | select | "md" | 控制内边距、间距和触发标签字体大小。 • 选项： "xs"、"sm"、"md"、"lg"。 |
布局方向 (orientation) | select | "horizontal" | 触发列表的结构轴向，可为 "horizontal" 或 "vertical"。 |
激活模式 (activationMode) | select | "automatic" | • "automatic" — 触发器获得键盘焦点时面板内容立即切换。 • "manual" — 仅在显式按下 Space 或 Enter 键时更新面板内容。 |
循环焦点 (loopFocus) | boolean | true | 在按方向键越过末尾时，将键盘焦点循环回到第一项。 |
惰性挂载 (lazyMount) | boolean | false | 延迟渲染非活动选项卡面板，直到首次访问其特定触发器。 |
Accessibility & Developer Notes
此组件开箱即用地符合 WAI-ARIA Tabs 设计模式。注水后，组件实现以下关键无障碍层：
- 语义角色分配： 在列表容器上设置
role="tablist"，在触发器上设置role="tab"，aria-selected反映活动状态，aria-controls自动引用面板 ID。 - Roving 焦点导航： 键盘方向键通过焦点漫游
tabIndex平滑导航触发器。按Home或End立即跳到端点。 - 动态 CSS 滑动指示器： 具备绝对定位的视觉滑块指示器，查询活动触发器的位置指标以平滑平移动画，避免布局抖动。
- 绕过 Hono Reconciler 限制： 在包裹静态 HTML 的 Preact 孤岛中，状态管理器在事件时直接操纵触发器属性（如
data-selected、aria-selected、tabindex、hidden），保证性能独立于 reconciler 时间线。