致力于挖掘功能强大、性能优越、创新前沿且简单易用的 C#/.NET 开源框架、项目、类库与工具。助力 .NET 开发者轻松解锁并运用这些实用的宝藏资源，提升开发效率与创新能力！

项目介绍

Ant Design Blazor 是一套基于 Ant Design 和 Blazor 的企业级组件库，旨在为开发者提供开箱即用的高质量 Blazor 组件，适用于多种托管方式，并支持丰富的国际化语言。该项目由.NET Foundation 支持，基于 MIT 开源协议，商业应用免费。

应用场景

Ant Design Blazor 组件库适用于构建企业级中后台产品，包括但不限于：

• 管理后台：为各种业务系统提供统一的管理界面。

• 数据分析平台：展示和分析业务数据。

• 企业级仪表板：实时监控业务指标和关键绩效指标（KPI）。

• 跨平台应用：支持在.NET MAUI、WPF、Windows Forms 等 Blazor 混合客户端环境中使用，以及 Electron 等基于 Web 标准的环境。

功能模块

Ant Design Blazor 提供了丰富的功能模块，包括但不限于：

• 基础组件：按钮、表单、输入框、选择器等。

• 数据展示组件：表格、树形控件、标签页、卡片等。

• 反馈组件：对话框、通知、加载指示器等。

• 导航组件：菜单、面包屑、步骤条等。

• 布局组件：栅格系统、布局容器等。

• 高级组件：图表、地图、富文本编辑器等（部分通过集成第三方库实现）。

功能特点

• 提炼自企业级中后台产品的交互语言和视觉风格：遵循 Ant Design 的设计规范，提供一致的交互体验和视觉风格。

• 开箱即用的高质量 Blazor 组件：组件经过精心设计和优化，可直接在项目中引用和使用。

• 支持多种托管方式：包括 WebAssembly 静态托管和基于 SignalR 的服务端 UI 即时交互。

• 支持渐进式 Web 应用（PWA）：提升 Web 应用的用户体验和性能。

• 使用 C# 构建：多范式静态语言带来高效的开发体验，支持 .NET Core 3.1 以上所有版本。

• 国际化支持：提供数十个国际化语言支持，满足不同地区用户的需求。

安装与使用

先决条件

• 安装.NET Core SDK 3.1 以上版本，推荐 .NET 8。

• 对于样式文件和互操作所需 TS 文件的构建，需要安装 Node.js。

安装方式

从模板创建一个新项目：

# 安装模板 $ dotnet new --install AntDesign.Templates # 从模板创建 Ant Design Blazor Pro 项目 $ dotnet new antdesign -o MyAntDesignApp

模板参数说明：

• -f|--full：如果设置这个参数，会生成所有 Ant Design Pro 页面（bool 类型，默认 false）。

• -ho|--host：指定托管模型（'webapp' | 'wasm' | 'server'，默认 'webapp'）。

• --styles：指定样式构建类型（css | less，默认 css）。

• --no-restore：如果设置这个参数，就不会自动恢复包引用（bool 类型，默认 false）。

在已有项目中引入 Ant Design Blazor：

# 进入应用的项目文件夹，安装 Nuget 包引用 $ dotnet add package AntDesign

在项目的Program.cs中注册相关服务：

builder.Services.AddAntDesign();

或者在Startup.cs中：

services.AddAntDesign();

在_Imports.razor中加入命名空间：

@using AntDesign

在适当的位置引入 CSS 和 JS 文件。WebApp 项目在App.razor中引入，WebAssembly 项目在index.html中引入：

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet"> <script src="_content/AntDesign/js/ant-design-blazor.js"></script>

为了动态地显示弹出组件，需要在App.razor中添加一个<AntContainer />组件。

项目演示

开源地址

https://gitee.com/ant-design-blazor/ant-design-blazor