syncfusion-blazor-buttons

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Blazor Buttons Components

Syncfusion Blazor 按钮组件

Components Overview

组件概述

The Syncfusion.Blazor.Buttons package provides 11 comprehensive button components:

Syncfusion.Blazor.Buttons 包提供了11种功能全面的按钮组件：

Core Buttons

核心按钮

Button (SfButton) - Standard button with multiple types, styles, icons, and states
ButtonGroup (SfButtonGroup) - Grouped button controls with selection modes
CheckBox (SfCheckBox) - Tri-state checkbox with checked, unchecked, and indeterminate states
RadioButton (SfRadioButton) - Radio button for mutually exclusive selections
ToggleSwitch (SfSwitch) - On/off toggle switch control

Button (SfButton) - 支持多种类型、样式、图标和状态的标准按钮
ButtonGroup (SfButtonGroup) - 带有选择模式的分组按钮控件
CheckBox (SfCheckBox) - 支持选中、未选中和不确定三种状态的三态复选框
RadioButton (SfRadioButton) - 用于互斥选择的单选按钮
ToggleSwitch (SfSwitch) - 开/关切换开关控件

Interactive Buttons

交互式按钮

DropdownMenu (SfDropDownButton) - Button with dropdown menu options
SplitButton (SfSplitButton) - Button with primary action and dropdown menu
ProgressButton (SfProgressButton) - Button with built-in progress indication

DropdownMenu (SfDropDownButton) - 带有下拉菜单选项的按钮
SplitButton (SfSplitButton) - 包含主操作和下拉菜单的按钮
ProgressButton (SfProgressButton) - 内置进度指示的按钮

Floating Actions

浮动操作组件

FloatingActionButton (SfFab) - Circular floating action button
SpeedDial (SfSpeedDial) - FAB with expandable action items (linear/radial)

FloatingActionButton (SfFab) - 圆形浮动操作按钮
SpeedDial (SfSpeedDial) - 带有可展开操作项的FAB（线性/放射状）

Chip Components

芯片组件

Chip (SfChip) - Compact elements for tags, filters, selections, and actions

Package:

Syncfusion.Blazor.Buttons

and

Syncfusion.Blazor.SplitButtons

Chip (SfChip) - 用于标签、筛选器、选择项和操作的紧凑元素

依赖包：

Syncfusion.Blazor.Buttons

和

Syncfusion.Blazor.SplitButtons

Common Setup and Installation

通用安装与配置

All button components share the same installation and setup process:

所有按钮组件共享相同的安装和配置流程：

NuGet Packages

NuGet 包

Install the required packages based on component type:

bash

undefined

根据组件类型安装所需的包：

bash

undefined

For Button, Chip, FAB, ToggleSwitch

适用于Button、Chip、FAB、ToggleSwitch

dotnet add package Syncfusion.Blazor.Buttons

For DropdownMenu, SplitButton, ProgressButton, ButtonGroup, SpeedDial

适用于DropdownMenu、SplitButton、ProgressButton、ButtonGroup、SpeedDial

dotnet add package Syncfusion.Blazor.SplitButtons

Required theme package

必需的主题包

dotnet add package Syncfusion.Blazor.Themes

undefined

dotnet add package Syncfusion.Blazor.Themes

undefined

Setup Steps (Common for All)

通用设置步骤

1. Add Namespaces (

~/_Imports.razor

csharp

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SplitButtons

2. Register Service (

~/Program.cs

csharp

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. Add Theme and Script (

~/index.html

~/App.razor

html

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
</head>

1. 添加命名空间（

~/_Imports.razor

）：

csharp

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SplitButtons

2. 注册服务（

~/Program.cs

）：

csharp

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. 添加主题与脚本（

~/index.html

或

~/App.razor

）：

html

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
</head>

Documentation and Navigation Guide

文档与导航指南

Button Component

Button 组件

📄 Read: references/button-features.md

Getting started and installation
Basic button implementation
Button types (flat, outline, round, primary, toggle)
Button styles (primary, success, info, warning, danger, link)
Icons and icon positioning
Button sizes (small, normal)
Repeat buttons
Tooltips
HTML attribute support
Native event handling

📄 Read: references/button-styling.md

CSS class customization
Appearance customization
Block buttons
Rounded corners
RTL (right-to-left) support
Theme integration
Color schemes and variations
Responsive design patterns

📄 Read: references/button-advanced-features.md

Accessibility (WCAG compliance, keyboard navigation, ARIA attributes)
Screen reader support
Disabled state handling
Toggle button functionality
Server vs Web App implementation differences
Performance optimization
Best practices and common pitfalls

📄 阅读： references/button-features.md

入门指南与安装步骤
基础按钮实现
按钮类型（扁平、轮廓、圆形、主要、切换）
按钮样式（主要、成功、信息、警告、危险、链接）
图标与图标位置
按钮尺寸（小、常规）
重复按钮
工具提示
HTML 属性支持
原生事件处理

📄 阅读： references/button-styling.md

CSS 类自定义
外观定制
块级按钮
圆角设置
RTL（从右到左）支持
主题集成
配色方案与变体
响应式设计模式

📄 阅读： references/button-advanced-features.md

可访问性（WCAG 合规、键盘导航、ARIA 属性）
屏幕阅读器支持
禁用状态处理
切换按钮功能
Server 与 Web App 实现差异
性能优化
最佳实践与常见陷阱

RadioButton Component

RadioButton 组件

📄 Read: references/radio-button-features.md

Getting started and installation
Basic radio button implementation
Radio button grouping with Name property
Label configuration and positioning
State and value management
Two-way data binding (@bind-Checked)
Value property for identification
Pre-selecting default values
Form integration patterns

📄 Read: references/radio-button-styling.md

CssClass for custom styling
HtmlAttributes dictionary usage
EnableRtl for right-to-left layouts
Disabled state configuration
EnablePersistence for state storage
Custom CSS class patterns
Theme customization techniques
Responsive design approaches

📄 Read: references/radio-button-advanced-features.md

ValueChange event handler
ChangeArgs event data structure
CheckedChanged callback implementation
Created lifecycle event
Event handling patterns
ARIA attributes for accessibility
Keyboard navigation support
Best practices and common patterns

📄 阅读： references/radio-button-features.md

入门指南与安装步骤
基础单选按钮实现
使用 Name 属性进行单选按钮分组
标签配置与位置
状态与值管理
双向数据绑定（@bind-Checked）
用于标识的 Value 属性
默认值预选择
表单集成模式

📄 阅读： references/radio-button-styling.md

用于自定义样式的 CssClass
HtmlAttributes 字典的使用
用于从右到左布局的 EnableRtl
禁用状态配置
用于状态存储的 EnablePersistence
自定义 CSS 类模式
主题定制技巧
响应式设计方法

📄 阅读： references/radio-button-advanced-features.md

ValueChange 事件处理程序
ChangeArgs 事件数据结构
CheckedChanged 回调实现
Created 生命周期事件
事件处理模式
用于可访问性的 ARIA 属性
键盘导航支持
最佳实践与常见模式

CheckBox Component

CheckBox 组件

📄 Read: references/checkbox-features.md

Getting started and installation
Basic checkbox implementation
Checkbox states (checked, unchecked, disabled)
Label configuration
Change event handling
Two-way data binding (@bind-Checked)
Multiple checkboxes and checkbox groups
Indeterminate (tristate) state

📄 Read: references/checkbox-styling.md

CSS class customization
Appearance customization
Theme integration (Bootstrap5, Material, Fabric, Tailwind)
Color variations (primary, success, warning, danger)
Size customization
RTL (right-to-left) support
Disabled appearance
Label styling and spacing

📄 Read: references/checkbox-advanced-features.md

Disabled state handling and conditional disabling
Accessibility (WCAG, ARIA attributes, screen readers)
Keyboard navigation (Tab, Space)
Form integration and validation
State management patterns
Best practices and common patterns

📄 阅读： references/checkbox-features.md

入门指南与安装步骤
基础复选框实现
复选框状态（选中、未选中、禁用）
标签配置
变更事件处理
双向数据绑定（@bind-Checked）
多复选框与复选框组
不确定（三态）状态

📄 阅读： references/checkbox-styling.md

CSS 类自定义
外观定制
主题集成（Bootstrap5、Material、Fabric、Tailwind）
颜色变体（主要、成功、警告、危险）
尺寸定制
RTL（从右到左）支持
禁用状态外观
标签样式与间距

📄 阅读： references/checkbox-advanced-features.md

禁用状态处理与条件禁用
可访问性（WCAG、ARIA 属性、屏幕阅读器）
键盘导航（Tab、Space）
表单集成与验证
状态管理模式
最佳实践与常见模式

Button Group Component

Button Group 组件

📄 Read: references/button-group-features.md

Getting started and installation
Basic button group implementation
Horizontal and vertical orientation
Selection modes (single, multiple, none)
Nesting button groups
Native event handling
Item configuration and data binding

📄 Read: references/button-group-styling.md

Appearance customization
Button types and styles within groups
Icons in button groups
Size variations
Custom CSS classes
Theme integration

📄 Read: references/button-group-advanced-features.md

Accessibility features
Keyboard navigation
Selection state management
Event handling patterns
Best practices for button groups

📄 阅读： references/button-group-features.md

入门指南与安装步骤
基础按钮组实现
水平与垂直方向
选择模式（单选、多选、无）
按钮组嵌套
原生事件处理
项配置与数据绑定

📄 阅读： references/button-group-styling.md

外观定制
组内按钮的类型与样式
按钮组中的图标
尺寸变体
自定义 CSS 类
主题集成

📄 阅读： references/button-group-advanced-features.md

可访问性功能
键盘导航
选择状态管理
事件处理模式
按钮组最佳实践

Chip Component

Chip 组件

📄 Read: references/chip-features.md

Getting started and installation
Basic chip implementation
Chip types (input, filter, choice, action)
Icon integration
Delete functionality
Selection handling
Events (click, delete, created, beforeItemRender)
Dynamic chip collections
Rendering from data sources

📄 Read: references/chip-styling.md

Appearance customization
Color variations
Size options
Custom CSS classes
Icon and avatar styling
Theme integration
Responsive design

📄 Read: references/chip-advanced-features.md

Accessibility support
Keyboard navigation
Custom template support
State management patterns
Event handling
Best practices

📄 阅读： references/chip-features.md

入门指南与安装步骤
基础芯片实现
芯片类型（输入、筛选、选择、操作）
图标集成
删除功能
选择处理
事件（点击、删除、创建、beforeItemRender）
动态芯片集合
从数据源渲染

📄 阅读： references/chip-styling.md

外观定制
颜色变体
尺寸选项
自定义 CSS 类
图标与头像样式
主题集成
响应式设计

📄 阅读： references/chip-advanced-features.md

可访问性支持
键盘导航
自定义模板支持
状态管理模式
事件处理
最佳实践

Dropdown Menu Component

Dropdown Menu 组件

📄 Read: references/dropdown-menu-features.md

Getting started and installation
Basic dropdown menu implementation
Popup items configuration (text, ID, icon, separator)
Icons in menu items
Item click events
Opening and closing behavior
Position customization
Dynamically adding/removing items
Grouped popups with ListView integration
Dialog opening on item click
DropdownList vs DropdownButton comparison

📄 Read: references/dropdown-menu-styling.md

Appearance customization
Caret icon customization
Hiding dropdown arrow
Icon and width customization
Popup width customization
Rounded corners
RTL support
Animation effects
Template customization
Theme integration

📄 Read: references/dropdown-menu-advanced-features.md

Accessibility features
Disabled state handling
Native event handling
Keyboard navigation
Focus management
Best practices and patterns

📄 阅读： references/dropdown-menu-features.md

入门指南与安装步骤
基础下拉菜单实现
弹出项配置（文本、ID、图标、分隔符）
菜单项中的图标
项点击事件
打开与关闭行为
位置定制
动态添加/移除项
与 ListView 集成的分组弹出框
点击项时打开对话框
DropdownList 与 DropdownButton 对比

📄 阅读： references/dropdown-menu-styling.md

外观定制
插入符图标定制
隐藏下拉箭头
图标与宽度定制
弹出框宽度定制
圆角
RTL 支持
动画效果
模板定制
主题集成

📄 阅读： references/dropdown-menu-advanced-features.md

可访问性功能
禁用状态处理
原生事件处理
键盘导航
焦点管理
最佳实践与模式

Floating Action Button (FAB) Component

浮动操作按钮（FAB）组件

📄 Read: references/fab-features.md

Getting started and installation
Basic FAB implementation
Position options (TopLeft, TopCenter, TopRight, MiddleLeft, MiddleCenter, MiddleRight, BottomLeft, BottomCenter, BottomRight)
Icons configuration
Content customization
Target element binding
Click event handling
Show/hide behavior
Visibility control

📄 Read: references/fab-styling.md

Appearance styles (primary, success, info, warning, danger)
Size variations (small, medium, large)
Icon positioning
Color customization
CSS class customization
Disabled appearance
Theme integration

📄 Read: references/fab-advanced-features.md

Accessibility support
Keyboard navigation
Event handling patterns
State management
Best practices for FAB usage

📄 阅读： references/fab-features.md

入门指南与安装步骤
基础 FAB 实现
位置选项（TopLeft、TopCenter、TopRight、MiddleLeft、MiddleCenter、MiddleRight、BottomLeft、BottomCenter、BottomRight）
图标配置
内容定制
目标元素绑定
点击事件处理
显示/隐藏行为
可见性控制

📄 阅读： references/fab-styling.md

外观样式（主要、成功、信息、警告、危险）
尺寸变体（小、中、大）
图标位置
颜色定制
CSS 类自定义
禁用状态外观
主题集成

📄 阅读： references/fab-advanced-features.md

可访问性支持
键盘导航
事件处理模式
状态管理
FAB 使用最佳实践

Progress Button Component

Progress Button 组件

📄 Read: references/progress-button-features.md

Getting started and installation
Basic progress button implementation
Spinner types and positions (left, right, top, bottom, center)
Progress states (Begin, Progress, End, Fail)
Duration configuration
Content customization during progress
Events (OnBegin, Progress, End, Fail)
Stopping progress programmatically
Hiding spinner
Progress tracking

📄 Read: references/progress-button-styling.md

Appearance customization
Button types and icons
CSS class customization for progress states
Progress indicator styling
Spinner customization
Content changes during progress
Theme integration

📄 Read: references/progress-button-advanced-features.md

Accessibility features
Trace events for debugging
Native event handling
State management patterns
Error handling
Best practices for progress buttons

📄 阅读： references/progress-button-features.md

入门指南与安装步骤
基础进度按钮实现
加载器类型与位置（左、右、上、下、居中）
进度状态（Begin、Progress、End、Fail）
时长配置
进度过程中的内容定制
事件（OnBegin、Progress、End、Fail）
以编程方式停止进度
隐藏加载器
进度跟踪

📄 阅读： references/progress-button-styling.md

外观定制
按钮类型与图标
进度状态的 CSS 类自定义
进度指示器样式
加载器定制
进度过程中的内容变更
主题集成

📄 阅读： references/progress-button-advanced-features.md

可访问性功能
用于调试的跟踪事件
原生事件处理
状态管理模式
错误处理
进度按钮最佳实践

Speed Dial Component

Speed Dial 组件

📄 Read: references/speeddial-features.md

Getting started and installation
Basic SpeedDial implementation
Display modes (Linear, Radial)
Action items configuration
Position options (9 positions)
Open and close behavior
Item click events
Open modes (Hover, Click)
Direction options (Up, Down, Left, Right, Auto)
Radial settings (offset, direction, startAngle, endAngle)
Icon configuration (open/close icons)

📄 Read: references/speeddial-styling.md

Appearance customization
Icons (open icon, close icon, item icons)
Color variations
Item templates
CSS class customization
Animation effects
Theme integration

📄 Read: references/speeddial-advanced-features.md

Accessibility support
Keyboard navigation
Event handling (all events)
State management patterns
Modal backdrop
Best practices

📄 阅读： references/speeddial-features.md

入门指南与安装步骤
基础 SpeedDial 实现
显示模式（线性、放射状）
操作项配置
位置选项（9种位置）
打开与关闭行为
项点击事件
打开模式（悬停、点击）
方向选项（上、下、左、右、自动）
放射状设置（偏移量、方向、起始角度、结束角度）
图标配置（打开/关闭图标）

📄 阅读： references/speeddial-styling.md

外观定制
图标（打开图标、关闭图标、项图标）
颜色变体
项模板
CSS 类自定义
动画效果
主题集成

📄 阅读： references/speeddial-advanced-features.md

可访问性支持
键盘导航
事件处理（所有事件）
状态管理模式
模态背景
最佳实践

Split Button Component

Split Button 组件

📄 Read: references/split-button-features.md

Getting started and installation
Basic split button implementation
Dropdown menu items configuration
Primary button action
Item selection events
Icons in items
Separator support
Opening and closing behavior
Event handling

📄 Read: references/split-button-styling.md

Appearance customization
Button styles
Icons and icon positioning
Size variations
Custom CSS classes
RTL support
Theme integration

📄 Read: references/split-button-advanced-features.md

Accessibility features
Disabled state handling
Keyboard navigation
Native event handling
Best practices

📄 阅读： references/split-button-features.md

入门指南与安装步骤
基础拆分按钮实现
下拉菜单项配置
主按钮操作
项选择事件
项中的图标
分隔符支持
打开与关闭行为
事件处理

📄 阅读： references/split-button-styling.md

外观定制
按钮样式
图标与图标位置
尺寸变体
自定义 CSS 类
RTL 支持
主题集成

📄 阅读： references/split-button-advanced-features.md

可访问性功能
禁用状态处理
键盘导航
原生事件处理
最佳实践

Toggle Switch Component

Toggle Switch 组件

📄 Read: references/toggle-switch-features.md

Getting started and installation
Basic toggle switch implementation
Checked and unchecked states
Two-way data binding (@bind-Checked)
On/Off label configuration
Change events
Value binding
Name attribute for forms
Default state configuration

📄 Read: references/toggle-switch-styling.md

Appearance customization
Size variations
Label customization (OnLabel, OffLabel)
Color schemes
Custom CSS classes
RTL support
Material theme considerations (no text support)
Theme integration

📄 Read: references/toggle-switch-advanced-features.md

Accessibility support
Keyboard navigation
Disabled state handling
Form integration
State management patterns
Best practices

📄 阅读： references/toggle-switch-features.md

入门指南与安装步骤
基础切换开关实现
选中与未选中状态
双向数据绑定（@bind-Checked）
开/关标签配置
变更事件
值绑定
表单的 Name 属性
默认状态配置

📄 阅读： references/toggle-switch-styling.md

外观定制
尺寸变体
标签定制（OnLabel、OffLabel）
配色方案
自定义 CSS 类
RTL 支持
Material 主题注意事项（不支持文本）
主题集成

📄 阅读： references/toggle-switch-advanced-features.md

可访问性支持
键盘导航
禁用状态处理
表单集成
状态管理模式
最佳实践

Common Patterns Across Components

组件通用模式

Event Handling Pattern

事件处理模式

All button components support standard Blazor event handling:

razor

<SfButton OnClick="HandleClick">Click Me</SfButton>

@code {
    private void HandleClick()
    {
        // Handle button click
    }
}

所有按钮组件都支持标准的Blazor事件处理：

razor

<SfButton OnClick="HandleClick">点击我</SfButton>

@code {
    private void HandleClick()
    {
        // 处理按钮点击事件
    }
}

Styling Pattern

样式设置模式

All components support CSS class customization:

razor

<SfButton CssClass="e-primary custom-button">Styled Button</SfButton>

所有组件都支持CSS类自定义：

razor

<SfButton CssClass="e-primary custom-button">样式化按钮</SfButton>

Icon Integration Pattern

图标集成模式

Most components support icon CSS classes:

razor

<SfButton IconCss="e-icons e-plus-icon">Add Item</SfButton>

大多数组件支持图标CSS类：

razor

<SfButton IconCss="e-icons e-plus-icon">添加项</SfButton>

Disabled State Pattern

禁用状态模式

All interactive components support disabled state:

razor

<SfButton Disabled="@isDisabled">Button</SfButton>

所有交互式组件都支持禁用状态：

razor

<SfButton Disabled="@isDisabled">按钮</SfButton>

RTL Support Pattern

RTL支持模式

All components support right-to-left rendering:

razor

<SfButton EnableRtl="true">RTL Button</SfButton>

所有组件都支持从右到左渲染：

razor

<SfButton EnableRtl="true">RTL按钮</SfButton>

Shared Configuration

共享配置

Theme Options

主题选项

All button components support Syncfusion themes:

Bootstrap5 (default):
```
bootstrap5.css
```
Material:
```
material.css
```
Fabric:
```
fabric.css
```
Tailwind:
```
tailwind.css
```
Fluent:
```
fluent.css
```

所有按钮组件都支持Syncfusion主题：

Bootstrap5（默认）：
```
bootstrap5.css
```
Material：
```
material.css
```
Fabric：
```
fabric.css
```
Tailwind：
```
tailwind.css
```
Fluent：
```
fluent.css
```

Common CSS Classes

通用CSS类

Standard CSS utility classes work across components:

e-primary: Primary action styling
e-success: Success/positive action
e-info: Informational action
e-warning: Warning/caution action
e-danger: Danger/negative action
e-link: Hyperlink styling
e-small: Small size variant
e-flat: Flat style (no background)
e-outline: Outline style (border only)
e-round: Circular/rounded style

标准CSS工具类可在所有组件中使用：

e-primary：主要操作样式
e-success：成功/积极操作样式
e-info：信息类操作样式
e-warning：警告/提醒操作样式
e-danger：危险/消极操作样式
e-link：超链接样式
e-small：小尺寸变体
e-flat：扁平样式（无背景）
e-outline：轮廓样式（仅边框）
e-round：圆形/圆角样式

Accessibility Features

可访问性功能

All components include:

ARIA attributes
Keyboard navigation support
Screen reader compatibility
Focus indicators
WCAG 2.1 compliance

所有组件均包含：

ARIA属性
键盘导航支持
屏幕阅读器兼容性
焦点指示器
WCAG 2.1合规性

Common Use Cases

常见使用场景

Standard Actions

标准操作

Use Button for primary, secondary, and tertiary actions in forms, dialogs, and pages.

在表单、对话框和页面中，使用Button实现主要、次要和三级操作。

Multi-Selection

多选场景

Use CheckBox for multiple independent selections, list items, and preferences.

使用CheckBox实现多个独立选择、列表项和偏好设置。

Exclusive Selection

单选场景

Use RadioButton for single selection from multiple options, preferences, settings, and survey questions.

使用RadioButton实现从多个选项中选择单一选项，适用于偏好设置、系统配置和调查问卷。

Grouped Actions

分组操作

Use ButtonGroup for related actions like text alignment, view modes, or filter options.

使用ButtonGroup实现相关操作，比如文本对齐、视图模式或筛选选项。

Tags and Filters

标签与筛选

Use Chip for tags, contact lists, filter selections, and removable items.

使用Chip实现标签、联系人列表、筛选选择项和可移除条目。

Menu Actions

菜单操作

Use DropdownMenu for contextual menus with multiple options.

使用DropdownMenu实现带有多个选项的上下文菜单。

Dual Actions

双重操作

Use SplitButton when you need a primary action with additional options.

当需要一个主操作和附加选项时，使用SplitButton。

Long Operations

长时操作

Use ProgressButton for operations that take time (file upload, form submission, API calls).

使用ProgressButton处理耗时操作（文件上传、表单提交、API调用）。

Primary Page Actions

页面主操作

Use FloatingActionButton for the primary action on mobile or dashboard pages.

在移动端或仪表板页面中，使用FloatingActionButton实现主要操作。

Multiple Quick Actions

快速多操作

Use SpeedDial when you need multiple related actions accessible from a single FAB.

当需要从单个FAB访问多个相关操作时，使用SpeedDial。

On/Off States

开/关状态

Use ToggleSwitch for binary settings, feature toggles, and preferences.

使用ToggleSwitch实现二元设置、功能切换和偏好选择。

Quick Start Examples

快速入门示例

Basic Button

基础按钮

razor

<SfButton CssClass="e-primary">Primary Action</SfButton>

razor

<SfButton CssClass="e-primary">主要操作</SfButton>

Basic CheckBox

基础复选框

razor

<SfCheckBox TChecked="bool" Label="Accept Terms"></SfCheckBox>

razor

<SfCheckBox TChecked="bool" Label="接受条款"></SfCheckBox>

CheckBox with Two-Way Binding

带双向绑定的复选框

razor

<SfCheckBox @bind-Checked="isEnabled" Label="Enable Feature"></SfCheckBox>

@code {
    private bool isEnabled = false;
}

razor

<SfCheckBox @bind-Checked="isEnabled" Label="启用功能"></SfCheckBox>

@code {
    private bool isEnabled = false;
}

Multiple Checkboxes

多复选框

razor

<SfCheckBox TChecked="bool"  Label="Option 1"></SfCheckBox>
<SfCheckBox TChecked="bool" Label="Option 2"></SfCheckBox>
<SfCheckBox TChecked="bool" Label="Option 3"></SfCheckBox>

razor

<SfCheckBox TChecked="bool"  Label="选项1"></SfCheckBox>
<SfCheckBox TChecked="bool" Label="选项2"></SfCheckBox>
<SfCheckBox TChecked="bool" Label="选项3"></SfCheckBox>

Tristate CheckBox

三态复选框

razor

<SfCheckBox EnableTriState="true" Checked="null" Label="Select All" TChecked="bool?"></SfCheckBox>

razor

<SfCheckBox EnableTriState="true" Checked="null" Label="全选" TChecked="bool?"></SfCheckBox>

Basic RadioButton

基础单选按钮

razor

<SfRadioButton Label="Option 1" Name="group" Value="option1" @bind-Checked="@selected"></SfRadioButton>
<SfRadioButton Label="Option 2" Name="group" Value="option2" @bind-Checked="@selected"></SfRadioButton>
<SfRadioButton Label="Option 3" Name="group" Value="option3" @bind-Checked="@selected"></SfRadioButton>

@code {
    private string selected = "option1";
}

razor

<SfRadioButton Label="选项1" Name="group" Value="option1" @bind-Checked="@selected"></SfRadioButton>
<SfRadioButton Label="选项2" Name="group" Value="option2" @bind-Checked="@selected"></SfRadioButton>
<SfRadioButton Label="选项3" Name="group" Value="option3" @bind-Checked="@selected"></SfRadioButton>

@code {
    private string selected = "option1";
}

RadioButton Group

单选按钮组

razor

<h4>Choose Your Plan</h4>
<SfRadioButton Label="Free" Name="plan" Value="free" @bind-Checked="@plan"></SfRadioButton>
<SfRadioButton Label="Pro" Name="plan" Value="pro" @bind-Checked="@plan"></SfRadioButton>
<SfRadioButton Label="Enterprise" Name="plan" Value="enterprise" @bind-Checked="@plan"></SfRadioButton>

@code {
    private string plan = "free";
}

razor

<h4>选择您的套餐</h4>
<SfRadioButton Label="免费版" Name="plan" Value="free" @bind-Checked="@plan"></SfRadioButton>
<SfRadioButton Label="专业版" Name="plan" Value="pro" @bind-Checked="@plan"></SfRadioButton>
<SfRadioButton Label="企业版" Name="plan" Value="enterprise" @bind-Checked="@plan"></SfRadioButton>

@code {
    private string plan = "free";
}

Button with Icon

带图标的按钮

razor

<SfButton IconCss="e-icons e-plus-icon" CssClass="e-primary">
    Add New
</SfButton>

razor

<SfButton IconCss="e-icons e-plus-icon" CssClass="e-primary">
    新建
</SfButton>

Toggle Switch

切换开关

razor

<SfSwitch @bind-Checked="isEnabled" OnLabel="On" OffLabel="Off"></SfSwitch>

@code {
    private bool isEnabled = true;
}

razor

<SfSwitch @bind-Checked="isEnabled" OnLabel="开启" OffLabel="关闭"></SfSwitch>

@code {
    private bool isEnabled = true;
}

Dropdown Menu

下拉菜单

razor

<SfDropDownButton Content="Actions">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Edit"></DropDownMenuItem>
        <DropDownMenuItem Text="Delete"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>

razor

<SfDropDownButton Content="操作">
    <DropDownMenuItems>
        <DropDownMenuItem Text="编辑"></DropDownMenuItem>
        <DropDownMenuItem Text="删除"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>

Floating Action Button

浮动操作按钮

razor

<div id="target" style="min-height:200px; position:relative;">
    <SfFab Target="#target" IconCss="e-icons e-plus" Content="Add"></SfFab>
</div>

razor

<div id="target" style="min-height:200px; position:relative;">
    <SfFab Target="#target" IconCss="e-icons e-plus" Content="添加"></SfFab>
</div>

Chip Collection

芯片集合

razor

<SfChip EnableDelete="true">
    <ChipItems>
        <ChipItem Text="Tag 1"></ChipItem>
        <ChipItem Text="Tag 2"></ChipItem>
        <ChipItem Text="Tag 3"></ChipItem>
    </ChipItems>
</SfChip>

razor

<SfChip EnableDelete="true">
    <ChipItems>
        <ChipItem Text="标签1"></ChipItem>
        <ChipItem Text="标签2"></ChipItem>
        <ChipItem Text="标签3"></ChipItem>
    </ChipItems>
</SfChip>

Navigation Tips

导航提示

For installation and basic setup, refer to any component's features file
For styling and appearance, refer to the styling files for each component
For accessibility and advanced features, refer to the advanced-features files
For specific component features, navigate to that component's documentation sections above

关于安装与基础配置，可参考任意组件的功能文档
关于样式与外观，可参考各组件的样式文档
关于可访问性与高级功能，可参考高级功能文档
关于特定组件功能，可导航至上方对应组件的文档章节

Support and Resources

支持与资源

Official Demos: https://blazor.syncfusion.com/demos/buttons/
API Documentation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.html
GitHub Examples: https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/
System Requirements: https://blazor.syncfusion.com/documentation/system-requirements
Licensing: Commercial license required for production use

Remember: Always start with the appropriate component's features file for implementation guidance, then move to styling and advanced features as needed.

官方演示： https://blazor.syncfusion.com/demos/buttons/
API文档： https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.html
GitHub示例： https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/
系统要求： https://blazor.syncfusion.com/documentation/system-requirements
授权： 生产环境使用需要商业授权

注意： 实现时请先从对应组件的功能文档开始，再根据需要参考样式和高级功能文档。

syncfusion-blazor-buttons

Original

Translation

Syncfusion Blazor Buttons Components

Syncfusion Blazor 按钮组件

Table of Contents

目录

Components Overview

组件概述

Core Buttons

核心按钮

Interactive Buttons

交互式按钮

Floating Actions

浮动操作组件

Chip Components

芯片组件

Common Setup and Installation

通用安装与配置

NuGet Packages

NuGet 包

For Button, Chip, FAB, ToggleSwitch

适用于Button、Chip、FAB、ToggleSwitch

For DropdownMenu, SplitButton, ProgressButton, ButtonGroup, SpeedDial

适用于DropdownMenu、SplitButton、ProgressButton、ButtonGroup、SpeedDial

Required theme package

必需的主题包

Setup Steps (Common for All)

通用设置步骤

Documentation and Navigation Guide

文档与导航指南

Button Component

Button 组件

RadioButton Component

RadioButton 组件

CheckBox Component

CheckBox 组件

Button Group Component

Button Group 组件

Chip Component

Chip 组件

Dropdown Menu Component

Dropdown Menu 组件

Floating Action Button (FAB) Component

浮动操作按钮（FAB）组件

Progress Button Component

Progress Button 组件

Speed Dial Component

Speed Dial 组件

Split Button Component

Split Button 组件

Toggle Switch Component

Toggle Switch 组件

Common Patterns Across Components

组件通用模式

Event Handling Pattern

事件处理模式

Styling Pattern

样式设置模式

Icon Integration Pattern

图标集成模式

Disabled State Pattern

禁用状态模式

RTL Support Pattern

RTL支持模式

Shared Configuration

共享配置

Theme Options

主题选项

Common CSS Classes

通用CSS类

Accessibility Features

可访问性功能

Common Use Cases

常见使用场景

Standard Actions

标准操作

Multi-Selection

多选场景

Exclusive Selection