SxButton (按钮)

  • Implemented

基础交互组件。遵循 Microsoft Fluent UI Blazor (Button) 官方 v4.13.2 规格。

API

Parameters (参数)

状态 参数名 类型 默认值 描述
[x] AccessKey (继承) string? null 元素的快捷键。
[x] Action string? null 关联的操作标识。
[x] AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。
[x] Appearance ButtonAppearance Neutral 视觉风格:Neutral, Accent, Outline, Lightweight, Stealth
[x] Autofocus bool? null 页面加载时自动获取焦点。
[x] BackgroundColor string? null 覆盖背景颜色 (CSS)。
[x] Class (继承) string? null 自定义 CSS 类名。
[x] Color string? null 覆盖文字颜色 (CSS)。
[x] Disabled (继承) bool false 是否禁用交互。
[x] Fluid (扩展) bool false 是否占满父容器宽度。
[x] Href string? null 链接地址,提供后渲染为 <a>
[x] IconEnd string? null 后置图标名。
[x] IconStart string? null 前置图标名。
[x] IconStyle (扩展) IconStyle Regular 图标风格。
[x] Id (继承) string? null 组件的物理 Id。
[x] Loading (继承) bool false 是否处于加载状态。
[x] LoadingText (扩展) string? null 加载时显示的提示文字。
[x] Required bool false 是否必填(用于表单)。
[x] Shape (扩展) ButtonShape Rounded 形状:Rounded, Square, Circular
[x] Size (扩展) ControlSize Medium 尺寸:Small, Medium, Large
[x] StopPropagation bool false 是否阻止事件冒泡。
[x] Style (继承) string? null 自定义内联样式。
[x] TabIndex (继承) int? null 元素的 Tab 顺序。
[x] Target string? null 链接目标 (如 _blank)。
[x] Title (继承) string? null HTML title 属性。
[x] Type SxButtonType Button 按钮类型:Button, Submit, Reset
[x] Value string? null 按钮关联的原始值。

说明:纯图标按钮(无文字)请提供 AriaLabelTitle 以保证可访问性。

HTML(WebComponent) 使用说明

  • 建议使用 text="按钮文字" 传入文本,避免子文本节点无法被渲染到按钮内部。
  • 布尔参数请使用 loading="true" / disabled="true" / fluid="true" 的形式。

Events (事件)

状态 事件名 类型 描述
[x] OnClick EventCallback<MouseEventArgs> 点击按钮时触发。

参考设计 (References)