SxCommandItem UI 设计规范

自动生成时间: 2026-02-04 组件路径: src/NextUI.Blazor/Components/SxCommandItem.razor

1. 组件概述

  • 组件包含 3 个参数，0 个回调，1 个公开方法。
  • 内部组合组件：SxButton。

2. 组件模式

模式 条件 说明
条件渲染 !string.IsNullOrEmpty(Label 影响局部渲染块

3. 表单字段

字段组件 绑定
- -

4. 操作按钮

外观 动作/链接 禁用条件
@GetAppearance() HandleClick @IsDisabled
@GetAppearance() HandleClick @IsDisabled

5. 验证规则

未检测到显式验证标记。

6. 状态与流程

内部状态字段： 未检测到明确状态字段。

7. 公共 API

7.1 Parameters

参数 类型 默认值 说明
IconStyle IconStyle IconStyle.Regular
Priority int 0 Priority for collapsing. Higher values collapse first (right to left by default). If not set, items collapse in reverse DOM order.
Collapsible bool true Whether this item can be collapsed. Set to false to keep it always visible.

7.2 Public Methods

  • Dispose: void

7.3 Events/Callbacks

无回调事件。

8. 典型使用场景 (Use Cases)

8.1 UC-1: 基础渲染

  1. 组件渲染默认状态
  2. 关键区域可见
  3. 无异常

9. 状态不变性测试 (State Invariants)

  • 同一参数重复设置不应触发非必要 UI 改变
  • 与表单字段无关的操作不应影响字段值

10. 测试检查点

  • 条件 !string.IsNullOrEmpty(Label 下渲染正确

11. Fluent UI 对齐

对应 Fluent UI Blazor 组件：FluentToolbar / FluentButton 源码：src/Core/Components/Toolbar/FluentToolbar.razor(.cs)、src/Core/Components/Button/FluentButton.razor.cs 对齐要点：

  • CommandItem 本质是 Toolbar 内的按钮元素，受 Toolbar 方向与键盘导航影响。
  • FluentButton 支持 Appearance、IconStart/IconEnd、Disabled、Loading 等基础交互。 关键参数/事件：
  • Appearance、IconStart、IconEnd、Disabled、Loading、OnClick。 差异与扩展：
  • SxCommandItem 若提供额外状态（如切换/计数），应保持按钮交互模型不变。

12. 参考文档摘要

  • docs/components/SxCommandBar.md: SxCommandBar 命令栏 具有渐进式折叠功能的命令栏组件。当空间不足时：

13. 规范合规检查

  • 未检测到明显硬编码颜色/px。

14. 变更历史

  • 2026-02-04: 深度分析填充规范。