SxButton UI 设计规范

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

1. 组件概述

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

2. 组件模式

模式 条件 说明
条件渲染 IsLink 影响局部渲染块

3. 表单字段

字段组件 绑定
- -

4. 操作按钮

外观 动作/链接 禁用条件
- - -

5. 验证规则

未检测到显式验证标记。

6. 状态与流程

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

7. 公共 API

7.1 Parameters

参数 类型 默认值 说明
Type SxButtonType SxButtonType.Button
Appearance ButtonAppearance ButtonAppearance.Neutral
Shape ButtonShape ButtonShape.Rounded
Size ControlSize ControlSize.Medium
IconStyle IconStyle IconStyle.Regular

7.2 Public Methods

无公开方法。

7.3 Events/Callbacks

无回调事件。

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

8.1 UC-1: 基础渲染

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

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

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

10. 测试检查点

  • 条件 IsLink 下渲染正确

11. Fluent UI 对齐

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

  • 组件渲染 <fluent-button>；disabled 条件为 Disabled || Loading。
  • Loading 时显示 ProgressRing；无 IconStart/End 时使用 overlay 包裹。
  • Appearance.Filled / Appearance.Hypertext 在 OnParametersSet 中直接抛异常（不支持）。
  • Target 仅允许 _self/_blank/_parent/_top，否则抛异常。
  • 当 Type != ButtonType.Button 时通过 JS updateProxy 代理点击。
  • 设置 BackgroundColor/Color 且无 Id 时自动生成 Id，并写入 ::part(control) 样式。 关键参数/事件：
  • Appearance、BackgroundColor、Color、Type、FormId、Autofocus、Disabled、Loading。
  • IconStart/IconEnd、OnClick、StopPropagation。 差异与扩展：
  • SxButton 需对齐“不支持 Filled/Hypertext”与 JS 代理行为；如保留 Hypertext 必须显式兼容。

12. 参考文档摘要

  • docs/ComponentInventory.md: NextUI 组件全量版图审计 (Fluent UI v4.13.2 对齐) 本文档作为 NextUI 设计系统的“全量施工蓝图”，实时对齐 Microsoft Fluent UI Blazor v4.13.2 官方组件库。所有组件分为已实现 [x]、开发中 [-] 和待开发 [ ] 状态。
  • docs/CLI-USAGE.md: Nx CLI 使用指南 Nx 是 NextUI 框架的命令行工具，提供项目管理、代码检查、文档查看、AI 辅助等功能。
  • docs/IDENTITY-DESIGN.md: NextUI 用户身份与认证设计方案 ## 一、问题分析

13. 规范合规检查

  • 可能存在硬编码样式: 存在 px 硬编码

14. 变更历史

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