当前位置: 首页 > news >正文

一套基于 Ant Design 和 Blazor 的企业级组件库

致力于挖掘功能强大、性能优越、创新前沿且简单易用的 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

http://www.jsqmd.com/news/259893/

相关文章:

  • 如何批量处理音频情绪分析?科哥镜像操作技巧揭秘
  • 人工智能之核心基础 机器学习 第十六章 模型优化
  • 手把手教你配置Batocera游戏整合包(入门必看)
  • 周末黑客马拉松:Qwen3-4B+云端GPU,48小时极速开发
  • IQuest-Coder-V1部署费用高?共享GPU集群优化方案
  • 阿里Qwen2.5-0.5B部署指南:中小企业AI解决方案
  • GLM-TTS音高控制秘籍:低成本租用GPU深度调参
  • PaddleOCR-VL自动化方案:云端定时处理文档,月省30小时人工
  • Z-Image-Turbo真实反馈:学生都说‘原来这么简单’
  • 全面讲解MDK驱动开发常见编译错误及解决方案
  • Qwen2.5异步推理部署:Celery任务队列整合案例
  • 智能证件照制作工坊API开发:RESTful接口设计指南
  • 大厂ES面试题性能优化方向深度剖析
  • 5分钟部署Qwen3-4B-Instruct-2507,零基础玩转256K长文本AI
  • ModelScope生态应用:Qwen1.5-0.5B-Chat部署实践
  • Qwen1.5-0.5B-Chat实战:情感分析对话系统开发
  • Z-Image-Turbo图像细节表现力实测,纹理清晰
  • Meta-Llama-3-8B-Instruct数据预处理:对话格式转换
  • SenseVoice Small完整指南:企业语音分析方案
  • 为什么选择MinerU做论文解析?CPU适配部署教程告诉你答案
  • AutoGen Studio功能全测评:多代理协作真实表现
  • 情感分析接单实战:云端GPU+预置工具,3单回本硬件投入
  • 古籍数字化新招:MinerU云端版解决老旧PDF识别难题
  • AUTOSAR软件开发小白指南:工具链搭建步骤
  • FRCRN语音降噪入门教程:16k音频处理环境配置
  • 没显卡怎么跑PyTorch 2.7?云端GPU 1小时1块,5分钟部署
  • Whisper语音识别实战:广播内容自动转录系统
  • 效果太强了!Qwen-Image-2512生成的depth图超真实
  • FSMN-VAD能否用于音乐检测?非语音场景适用性评测
  • Live Avatar infer_frames调整:帧数变化对流畅度影响实测