基于腾讯 TDesign 的 Blazor 企业级组件库

✨ 特性

• 🌈 提炼自 TDesign 的企业级中后台产品的交互语言和视觉风格
• 📦 开箱即用的高质量 Blazor 组件，可在多种托管方式共享
• 💕 支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互
• 🎨 支持渐进式 Web 应用（PWA）
• 🛡 使用 C# 构建，多范式静态语言带来高效的开发体验
• ⚙️ 基于 .NET 6/7，可直接引用丰富的 .NET 类库
• 🎁 可与已有的 ASP.NET Core MVC、Razor Pages 项目无缝集成
• 💴 基于 MIT 开源协议

🌈 Demo 演示

• 在线演示
  • http://tblazor.com
• 源码运行
  • 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/>
  

:pencil: 参与贡献

• 如果你有意向参与贡献，请先阅读贡献指南
• 有任何问题，欢迎通过 Github issues 反馈
• 提供目前进度的实时看板

我们的贡献者 非常感谢每一个项目贡献者的辛勤付出

:house: 社区支持

如果您在此过程中遇到任何问题，请通过以下渠道寻求帮助：

• 作者邮箱：[william-zzh@outlook.com]
• 作者微信：playermaker（请注明来源）
• 官方微信：TDesignBlazor 官方群
• 交流论坛：https://github.com/tdesign-blazor/TDesignBlazor/discussions

我们鼓励有经验的用户帮助新手，并会授予勋章。

:triangular_flag_on_post: 行为准则

本项目采用了贡献者契约定义的行为准则，以澄清我们社区的预期行为。请仔细阅读行为准则。

:newspaper: 许可证（License）

🔗 相关链接

• Blazor 官方文档
• MS Learn 平台 Blazor 教程
• ComponentBuilder 自动化组件框架