SuperAPI AI 工具集

syncfusion-blazor-buttons

前端与建站

查看项目

更新于 10-16 02:43

技能介绍

用途

本技能用于在 Blazor 应用中实现 Syncfusion 提供的按钮类 UI 组件。它围绕 Syncfusion.Blazor.Buttons 与 Syncfusion.Blazor.SplitButtons 两个包,覆盖 11 个按钮与交互组件,帮助开发者完成按钮、选择控件、标签、菜单及浮动操作按钮的集成与定制。

涉及组件

核心按钮类:Button(SfButton)、ButtonGroup(SfButtonGroup)、CheckBox(SfCheckBox)、RadioButton(SfRadioButton)、ToggleSwitch(SfSwitch)。

交互按钮类:DropdownMenu(SfDropDownButton)、SplitButton(SfSplitButton)、ProgressButton(SfProgressButton)。

浮动操作类:FloatingActionButton(SfFab)、SpeedDial(SfSpeedDial)。

标签类:Chip(SfChip)。

主要能力

各组件按「功能特性、样式定制、高级特性」三类参考文档展开。功能特性涵盖基础实现、类型与状态、数据绑定、事件;样式文档涵盖 CSS 类定制、外观定制、颜色与尺寸、RTL、主题集成;高级特性涵盖无障碍(ARIA、键盘导航、屏幕阅读器、WCAG 2.1 合规)、禁用状态、事件处理模式与最佳实践。

共享配置方面:主题支持 Bootstrap5(默认)、Material、Fabric、Tailwind、Fluent;通用 CSS 类包括 e-primary、e-success、e-info、e-warning、e-danger、e-link、e-small、e-flat、e-outline、e-round。

使用方式

安装 NuGet 包:Button、Chip、FAB、ToggleSwitch 使用 dotnet add package Syncfusion.Blazor.Buttons;DropdownMenu、SplitButton、ProgressButton、ButtonGroup、SpeedDial 使用 dotnet add package Syncfusion.Blazor.SplitButtons;主题包 dotnet add package Syncfusion.Blazor.Themes。

配置步骤:在 ~/_Imports.razor 添加 @using Syncfusion.Blazor;、@using Syncfusion.Blazor.Buttons;、@using Syncfusion.Blazor.SplitButtons;;在 ~/Program.cs 调用 builder.Services.AddSyncfusionBlazor();;在 ~/index.html 或 ~/App.razor 的 head 中引入主题样式与脚本(bootstrap5.css 与 syncfusion-blazor.min.js)。

常用模式示例:事件处理 <SfButton OnClick="HandleClick">Click Me</SfButton>;样式定制 <SfButton CssClass="e-primary custom-button">Styled Button</SfButton>;图标 <SfButton IconCss="e-icons e-plus-icon">Add Item</SfButton>;禁用 <SfButton Disabled="@isDisabled">Button</SfButton>;RTL <SfButton EnableRtl="true">RTL Button</SfButton>。

适用场景

标准动作用 Button;多项独立选择用 CheckBox;多选一用 RadioButton;相关动作分组用 ButtonGroup;标签与筛选用 Chip;带多选项的上下文菜单用 DropdownMenu;主操作加附加选项用 SplitButton;耗时操作(文件上传、表单提交、API 调用)用 ProgressButton;移动端或仪表板主操作用 FloatingActionButton;单一 FAB 展开多个相关动作用 SpeedDial;开关型设置在 ToggleSwitch。

限制

资料未提供收费、价格、授权方式、版本兼容性与性能指标等信息。具体组件的属性细节与完整 API 需查阅对应参考文档。