基于腾讯 TDesign 的 Blazor 企业级组件库
- 🌈 提炼自 TDesign 的企业级中后台产品的交互语言和视觉风格
- 📦 开箱即用的高质量 Blazor 组件,可在多种托管方式共享
- 💕 支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互
- 🎨 支持渐进式 Web 应用(PWA)
- 🛡 使用 C# 构建,多范式静态语言带来高效的开发体验
- ⚙️ 基于 .NET 6/7,可直接引用丰富的 .NET 类库
- 🎁 可与已有的 ASP.NET Core MVC、Razor Pages 项目无缝集成
- 💴 基于 MIT 开源协议
- 在线演示
- 源码运行
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
我们鼓励有经验的用户帮助新手,并会授予勋章。
本项目采用了贡献者契约定义的行为准则,以澄清我们社区的预期行为。请仔细阅读行为准则。