可切换选中状态的按钮组件。对齐 Microsoft Fluent UI Blazor ToggleButton (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。
使用场景
约束说明
Value 表示当前是否选中。Disabled 为 true 时不响应点击。
行为说明
- 点击触发
ValueChanged 并切换 Value。
ChildContent 优先于 Label 渲染。
API
Parameters
| 状态 |
参数名 |
类型 |
默认值 |
描述 |
| Implemented |
Label |
string? |
null |
按钮文本。 |
| Implemented |
Appearance |
ButtonAppearance |
Neutral |
视觉风格。 |
| Implemented |
Value |
bool |
false |
是否选中。 |
| Implemented |
AriaLabel |
string? |
null |
aria-label。 |
| Implemented |
Autofocus |
bool |
false |
是否自动聚焦。 |
| Implemented |
AccessKey (继承) |
string? |
null |
快捷键。 |
| Implemented |
TabIndex (继承) |
int? |
null |
Tab 顺序。 |
| Implemented |
ChildContent |
RenderFragment? |
null |
自定义内容。 |
| Implemented |
Disabled (继承) |
bool |
false |
禁用状态。 |
| Implemented |
Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented |
Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented |
Style (继承) |
string? |
null |
自定义样式。 |
| Implemented |
Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented |
AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
Events
| 状态 |
事件名 |
类型 |
描述 |
| Implemented |
ValueChanged |
EventCallback<bool> |
状态改变时触发。 |
示例
<SxToggleButton Label="切换我" @bind-Value="_checked" />
<SxToggleButton Appearance="ButtonAppearance.Accent">
<SxIcon Name="star" /> 收藏
</SxToggleButton>
参考设计 (References)
