SxCommandBar 命令栏

具有渐进式折叠功能的命令栏组件。当空间不足时：

第一阶段：从右向左逐步隐藏按钮标签（保留图标）
第二阶段：从右向左逐步收起按钮到溢出菜单

基本用法

<SxCommandBar>
    <SxCommandItem Icon="floppy-disk" Label="保存" OnClick="HandleSave" />
    <SxCommandItem Icon="copy" Label="复制" OnClick="HandleCopy" />
    <SxCommandItem Icon="paste" Label="粘贴" OnClick="HandlePaste" />
    <SxCommandItem Icon="trash" Label="删除" OnClick="HandleDelete" />
</SxCommandBar>

折叠行为

OverflowBehavior.Both（默认）

先隐藏标签，再收起到菜单：

[Save] [Copy] [Paste] [Delete] [Undo]     ← 全部展开
[Save] [Copy] [Paste] [Delete] [⬜]       ← Undo 标签隐藏
[Save] [Copy] [⬜] [⬜] [⬜]              ← 更多标签隐藏
[⬜] [⬜] [⬜] [⬜] [⬜]                   ← 所有标签隐藏
[⬜] [⬜] [⬜] [⬜] [⋮]                   ← Undo 收起到菜单

OverflowBehavior.CollapseLabels

只隐藏标签，不收起到菜单：

<SxCommandBar OverflowBehavior="OverflowBehavior.CollapseLabels">
    <SxCommandItem Icon="bold" Label="加粗" />
    <SxCommandItem Icon="italic" Label="斜体" />
    <SxCommandItem Icon="underline" Label="下划线" />
</SxCommandBar>

OverflowBehavior.CollapseItems

直接收起到菜单，保留标签：

<SxCommandBar OverflowBehavior="OverflowBehavior.CollapseItems">
    <SxCommandItem Icon="align-left" Label="左对齐" />
    <SxCommandItem Icon="align-center" Label="居中" />
    <SxCommandItem Icon="align-right" Label="右对齐" />
</SxCommandBar>

优先级控制

使用 Priority 参数控制折叠顺序，值越高越先折叠。使用 Collapsible="false" 防止某项被折叠。

<SxCommandBar>
    <SxCommandItem Icon="floppy-disk" Label="保存" Collapsible="false" />
    <SxCommandItem Icon="copy" Label="复制" Priority="1" />
    <SxCommandItem Icon="paste" Label="粘贴" Priority="2" />
    <SxCommandItem Icon="trash" Label="删除" Priority="3" />
</SxCommandBar>

溢出状态回调

<SxCommandBar OnOverflowChanged="HandleOverflowChanged">
    ...
</SxCommandBar>

@code {
    private void HandleOverflowChanged(CommandBarOverflowState state)
    {
        Console.WriteLine($"隐藏标签: {state.CollapsedLabelCount}");
        Console.WriteLine($"溢出项: {state.OverflowedItemCount}");
        Console.WriteLine($"总项数: {state.TotalItemCount}");
    }
}

SxCommandBar 参数

参数	类型	默认值	说明
`Orientation`	`Orientation`	`Horizontal`	布局方向
`OverflowBehavior`	`OverflowBehavior`	`Both`	折叠策略
`Size`	`ControlSize`	`Small`	按钮大小
`Appearance`	`ButtonAppearance`	`Stealth`	按钮外观（全局默认）
`LabelMode`	`LabelMode`	`Auto`	标签显示模式（全局默认）
`Justify`	`CommandBarJustify`	`Start`	对齐方式（Start/End）
`MinVisibleItems`	`int`	`1`	最少可见项数
`MoreIcon`	`string`	`ellipsis-vertical`	更多按钮图标
`MoreLabel`	`string?`	`null`	更多按钮标签
`ChildContent`	`RenderFragment`	-	命令项内容
`OnOverflowChanged`	`EventCallback<CommandBarOverflowState>`	-	溢出状态变化回调

SxCommandItem 参数

参数	类型	默认值	说明
`Icon`	`string?`	`null`	图标名称
`Label`	`string?`	`null`	按钮标签
`OnClick`	`EventCallback`	-	点击事件
`Appearance`	`ButtonAppearance?`	`null`	按钮外观（继承父级）
`Size`	`ControlSize?`	`null`	按钮大小（继承父级）
`LabelMode`	`LabelMode?`	`null`	标签显示模式（继承父级）
`IconStyle`	`IconStyle`	`Regular`	图标风格
`Disabled`	`bool`	`false`	禁用状态
`Priority`	`int`	`0`	优先级（越大越先隐藏）
`Collapsible`	`bool`	`true`	是否可折叠

不同外观

<SxCommandBar>
    <SxCommandItem Icon="plus" Label="新建" Appearance="ButtonAppearance.Accent" />
    <SxCommandItem Icon="pencil" Label="编辑" Appearance="ButtonAppearance.Outline" />
    <SxCommandItem Icon="share-nodes" Label="分享" Appearance="ButtonAppearance.Lightweight" />
    <SxCommandItem Icon="ellipsis" Label="更多" Appearance="ButtonAppearance.Stealth" />
</SxCommandBar>

标签显示模式

使用 LabelMode 参数控制标签的显示方式：

模式	说明
`Auto`	自动模式（默认），标签随折叠行为自动显示/隐藏
`Always`	始终显示标签，忽略折叠行为
`Never`	始终隐藏标签，仅显示图标

<!-- 全局设置为仅图标模式 -->
<SxCommandBar LabelMode="LabelMode.Never">
    <SxCommandItem Icon="bold" Label="加粗" />
    <SxCommandItem Icon="italic" Label="斜体" />
    <SxCommandItem Icon="underline" Label="下划线" />
</SxCommandBar>

<!-- 混合模式：部分按钮始终显示标签 -->
<SxCommandBar>
    <SxCommandItem Icon="floppy-disk" Label="保存" LabelMode="LabelMode.Always" />
    <SxCommandItem Icon="copy" Label="复制" />
    <SxCommandItem Icon="paste" Label="粘贴" />
</SxCommandBar>

纯图标模式

不设置 Label 参数即为纯图标模式（与 LabelMode.Never 类似，但不会显示 tooltip）：

<SxCommandBar>
    <SxCommandItem Icon="bold" />
    <SxCommandItem Icon="italic" />
    <SxCommandItem Icon="underline" />
    <SxCommandItem Icon="list-ul" />
    <SxCommandItem Icon="list-ol" />
</SxCommandBar>

在 Playground 中打开 →