OverflowActions

在有限宽度内优先展示操作按钮，并将放不下的操作收进更多菜单，保持工具栏紧凑可用。

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

如何使用

用于一组操作随可用宽度逐步收进更多菜单。使用 OverflowAction 和 Separator 组合，不在页面重做宽度检测和菜单分配。

items 使用唯一 id 的 action / separator；显式 children 替换 items。
显式组合使用 OverflowAction as="item" 与 Separator as="separator"；compact / overflow / overflowFrom 控制收纳方式。

导入

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

用法

收起为图标

隐藏全部按钮

从起点隐藏

从末端隐藏

响应式分隔线

起点对齐菜单

末端对齐菜单

API 参考

属性	类型	默认值	示例	描述
`items`	`OverflowActionsItem[]`	`[]`	`items={items}`	默认内建操作与分隔项数组；action 提供 id、label，可选 icon/disabled/href/target/rel/onAction/buttonProps/parts，separator 提供 type="separator" 与 id。每个 id 唯一；children 存在时改用显式子项。
`compact`	`"auto" \| "none"`	`"auto"`	`compact="auto"`	auto 在宽度不足且所有 Action 都有 icon 与 label 时先统一隐藏文字；none 跳过此步骤，直接按 overflow 转移操作。
`overflow`	`"all" \| "progressive"`	`—`	`overflow="all"`	all 在放不下时将全部操作转入 More；progressive 按 overflowFrom 逐项转入，保留可容纳的操作。菜单展开时冻结布局。
`overflowFrom`	`"start" \| "end"`	`"end"`	`overflowFrom="start"`	progressive 模式从数据/组合顺序的开头或末尾依次转移操作；all 模式不区分方向。
`availableWidth`	`number`	`—`	`availableWidth={42}`	外部给定可用于操作组布局的宽度，单位 px；提供后不再注册自身尺寸观察，适合 DataTable 复用列宽。
`maxVisible`	`number`	`—`	`maxVisible={42}`	最多直出操作数，不含More／Separator；缺省不限制，有限值向下取整并至少0，非有限值不限制。宽度可进一步收纳；菜单展开冻结。
`moreLabel`	`string`	`—`	`moreLabel="Example"`	More 按钮的无障碍名称，未传时按当前语言显示。
`align`	`"start" \| "end"`	`"end"`	`align="start"`	Listbox 水平对齐
`disabled`	`boolean`	`false`	`disabled`	禁用全部操作
`buttonProps`	`GlobalButtonProps`	`—`	`buttonProps={value}`	所有 Action、More 与隐藏测量副本共享的 Button 默认 Props；支持 variant/size/bare/emphasis/class/style，排除由操作组接管的内容、角色、点击、链接、禁用与名称字段。
`children`	`Snippet`	`—`	`<OverflowActions>Content</OverflowActions>`	声明直系 OverflowAction as="item" 与 Separator as="separator"；存在时替换 items 内建操作，结构项不作为独立溢出候选。
`parts`	`Parts`	`—`	`parts={partsOptions}`	配置默认生成的 Button、SelectButton、Listbox、MenuItem、Separator；More 的 parts.SelectButton 高于组级 parts.Button。公开 Parts 结构与覆盖优先级见下文。
`onAction`	`(event: OverflowActionsActionEvent) => void`	`—`	`onAction={(value) => { /* handle value */ }}`	操作执行后回调：id 为稳定标识，source 为 "button" 或 "menu"；item 为匹配的内建数据（显式模式通常无），originalEvent 为可选鼠标事件。