mcpField
S
syncfusion-blazor-common

syncfusion-blazor-common

github.com/syncfusion开发4414 次安装1 周前更新
代码仓库

关于 syncfusion-blazor-common

面向 Blazor 开发者的 Syncfusion Blazor 配置与使用指南，涵盖项目初始化、组件接入、脚本加载、测试和本地化。

主要功能

  1. 01Blazor 项目初始化
  2. 02Syncfusion 组件配置
  3. 03脚本与 CDN 加载
  4. 04bUnit 组件测试
  5. 05本地化与全球化设置

适用场景

  1. 01为新 Blazor 项目添加 Syncfusion 组件
  2. 02为不同 .NET 版本配置项目
  3. 03设置组件单元测试
  4. 04配置多语言和区域格式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-common

安装后在 Claude Code 中输入/syncfusion-blazor-common确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
add-script-reference-and-cdn.md
bunit-setup.md
getting-started.md
localization-globalization.md

详细介绍

Syncfusion Blazor 入门指南

Syncfusion Blazor 组件在 Blazor Web Apps 中的设置和配置指南。

适用场景

在以下情况下使用此技能：

  • 使用 Syncfusion Blazor 组件设置新的 Blazor 项目
  • 创建指定 .NET 版本目标（net8.0、net9.0、net10.0 等）的 Blazor Web App
  • 根据上下文添加 Syncfusion 组件（Grid、Button 等）及其功能
  • 使用静态资源或 CDN 优化脚本加载
  • 为 Syncfusion 组件设置 bUnit 测试

快速参考

前提条件

  • .NET 8+ SDK
  • Blazor Web App 项目
  • Syncfusion 帐户（免费试用）
  • NuGet 包访问权限

1. 入门指南

详细指南：getting-started.md

快速设置
  1. 创建 Blazor Web App，并选择渲染模式和明确的 .NET 版本（例如，.NET 10）
  2. 安装 Syncfusion.Blazor.Grid 和 Syncfusion.Blazor.Themes NuGet 包。所有独立包都列在此处
  3. 将 @using Syncfusion.Blazor 和相关组件命名空间添加到 _Imports.razor
  4. 在 Program.cs 中注册 builder.Services.AddSyncfusionBlazor()
  5. 在 App.razor 中添加主题 CSS 和脚本引用
  6. 在页面中使用 Syncfusion 组件

关键规则：对于 Auto/WASM 模式 → 必须在服务器和客户端项目中都进行注册
重要提示：创建项目时务必指定目标 .NET 框架版本，以确保兼容性

快速入门选项
  • Blazor Playground：基于浏览器，无需本地安装
  • Template Studio：预配置的 VS/VS Code 项目模板

2. 脚本引用和 CDN

详细指南：add-script-reference-and-cdn.md

脚本加载选项
方法最适用场景
静态 Web 资源（推荐）最佳性能，支持离线
CDN云托管，快速设置
独立脚本最少量的组件使用

3. bUnit 测试

详细指南：bunit-setup.md

使用 bUnit 对 Syncfusion Blazor 组件进行单元测试。

必需设置

安装 bunit NuGet 包，然后在每个测试中注册：

using var ctx = new TestContext();
ctx.Services.AddSyncfusionBlazor()
   .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
ctx.Services.AddOptions();
测试模式
  1. RenderComponent<TPage>() → 渲染
  2. FindComponent<SfButton>() → 定位
  3. .Click() → 交互
  4. MarkupMatches(...) → 断言

适用于 xUnit 和 NUnit（对于 NUnit，请使用 Bunit.TestContext 以避免命名冲突）

4. 本地化和全球化

详细指南：localization-globalization.md

为 Syncfusion Blazor 组件配置多语言支持和特定文化的格式。

核心概念
  • 国际化（i18n）：解析和格式化日期、时间、数字和货币
  • 本地化（l10n）：添加特定文化的自定义设置并翻译 UI 文本
  • 全球化：结合 i18n 和 l10n
快速设置
  1. 从 GitHub 下载并添加基于文化的 .resx 资源文件——下载前请先征求许可
  2. 创建一个实现 ISyncfusionStringLocalizer 的 SyncfusionLocalizer 类
  3. 在 Program.cs 中注册： 
    builder.Services.AddSyncfusionBlazor();
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));
  4. 静态或动态设置文化（服务器、WebAssembly 或 MAUI 应用）
  5. 创建 CultureSwitcher 组件以动态选择文化

评论

支持 Markdown