定价

Tab

Figma 源代码

在同一区域的多个视图或内容面板之间切换，支持数据生成或自定义按钮组合，并提供键盘导航。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于同一区域的内容面板或视图切换；截图中的下划线标签页可选 underline 变体。只改变过滤参数时使用 Segmented。

  • items 提供唯一 value 与 label；显式 Button as="item" 替换 items。

  • bind:value 同步当前项；缺失或不匹配时仅视觉回退，不写回值。内容面板按当前值由页面展示。

导入

import { Tab } from '@snowui-design-system/components';

用法

变体

尺寸

垂直布局

填充

组合

API 参考

属性 类型 默认值 示例 描述
value string — value="preview" 当前激活项的唯一值，支持 bind:value；点击或键盘激活时更新。缺失或不匹配时视觉回退到首个可用项，不自动写回绑定值。
variant TabVariant "pill" variant={value} Tab 视觉变体
size TabSize "sm" size={value} 同时控制 Tab 容器的 padding / radius / gap，并作为组合默认值传给直系 Button as="item"；Item 尺寸样式优先级为 style > class > Button size > Tab size
row boolean false row 显式横向排列；row 与 column 均为 false 时仍横向显示，同时启用时 row 优先。
column boolean false column 纵向排列；与 Frame 写法统一
fill boolean false fill Figma fill 宽度;容器有显式宽度时,横向子项等宽填满
onChange (value: string) => void — onChange={(value: string) => view = value} 用户激活不同选项后调用，参数为新 value；重复激活当前项不触发，回调不可取消选择。
selectionFollowsFocus boolean false selectionFollowsFocus={true} 方向键是否直接激活;Tab 默认 false(仅切焦点 + Enter 激活),Segmented 默认 true
role string "tablist" role="tablist" ARIA 容器 role
itemRole string — itemRole="tab" 写入子项的 ARIA role；未传时保留 Button 自身语义。选项卡示例显式传 tab；传 radio 时同步 aria-checked，其余情况同步 aria-selected。
children Snippet — <Tab itemRole="tab" value="preview"><Button as="item" value="preview">Preview</Button><Button as="item" value="code">Code</Button></Tab> 无参数的显式子项内容，使用 Button as="item" 并设置唯一 value；替代 items，子项 Props 直接配置。
items TabItem[] [] items={[{ value: 'preview', label: 'Preview' }, { value: 'code', label: 'Code' }]} 内置子项数据，每项必填唯一 value 和可读 label，可选 icon 组件及 disabled；icon 生成 Icon + Text，禁用项跳过键盘选择。children 存在时忽略 items。
parts ComponentPartsOf<{ Button: typeof Button; Icon: typeof Icon; Text: typeof Text; }> — parts={{ Button: { scaleOnHover: false }, Icon: { size: 16 } }} 批量配置默认生成的 Button、Icon 与 Text，例如 parts.Button.scaleOnHover；显式 children 不消费这些默认子项配置。