基于腾讯 TDesign 的 Blazor 企业级组件库
✨ 特性
🌈 提炼自 TDesign 的企业级中后台产品的交互语言和视觉风格📦 开箱即用的高质量 Blazor 组件，可在多种托管方式共享💕 支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互🎨 支持渐进式 Web 应用（PWA）🛡 使用 C# 构建，多范式静态语言带来高效的开发体验⚙️ 基于 .NET 6/7，可直接引用丰富的 .NET 类库🎁 可与已有的 ASP.NET Core MVC、Razor Pages 项目无缝集成💴 基于 MIT 开源协议
🌈 Demo 演示
- 在线演示
- 源码运行
TDesign.Docs.ServerSide是服务端托管TDesign.Docs.WebAssembly是纯客户端托管
🖥 支持环境
- 支持 WebAssembly 静态文件部署
- 主流 4 款现代浏览器，以及 Internet Explorer 11+（限 Blazor Server）
- 可直接运行在 .NET MAUI、WPF、Windows Forms 等 Blazor 混合客户端环境中
- 可直接运行在 Electron 等基于 Web 标准的环境上
 Edge / IE |
 Firefox |
 Chrome |
 Safari |
 Opera |
 Electron |
|---|---|---|---|---|---|
| Edge 16 / IE 11† | 522 | 57 | 11 | 44 | Chromium 57 |
由于 WebAssembly 的限制，Blazor WebAssembly 不支持 IE 浏览器，但 Blazor Server 支持 IE 11†。 详见官网说明。 从 .NET 5 开始，Blazor 不再官方支持 IE 11。详见 Blazor: Updated browser support。社区项目 Blazor.Polyfill 提供了非官方支持。
📦 安装使用
-
从 Nuget 直接安装
> Install-Package TDesign -
在项目中注册服务
builder.Service.AddTDesign();
-
在
wwwroot/index.html(WebAssembly) 或Pages/_Host.cshtml(Server) 中引入静态文件:<link rel="stylesheet" href="_content/TDesign/tdesign-blazor.css" />
-
在
_Imports.razor中加入命名空间@using TDesign
-
在
App.razor增加TDesignContainer组件，用于动态组件的渲染<Router AppAssembly="@typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> <FocusOnNavigate RouteData="@routeData" Selector="h1" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <LayoutView Layout="@typeof(MainLayout)"> <p role="alert">Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> <!--增加组件--> <TDesignContainer/>
📝 参与贡献
- 如果你有意向参与贡献，请先阅读贡献指南
- 有任何问题，欢迎通过 Github issues 反馈
- 提供目前进度的实时看板
我们的贡献者 非常感谢每一个项目贡献者的辛勤付出
🏠 社区支持
如果您在此过程中遇到任何问题，请通过以下渠道寻求帮助：
- 作者邮箱：[[email protected]]
- 作者微信：playermaker（请注明来源）
- 官方微信：TDesignBlazor 官方群
- 交流论坛：https://github.com/tdesign-blazor/TDesignBlazor/discussions
我们鼓励有经验的用户帮助新手，并会授予勋章。
🚩 行为准则
本项目采用了贡献者契约定义的行为准则，以澄清我们社区的预期行为。请仔细阅读行为准则。
