tdesign-blazor/TDesignBlazor

Fork: 21 Star: 176 (更新于 2024-10-31 13:51:28)

license: MIT

Language: C# .

基于腾讯 TDesign 的 Blazor 组件库

最后发布版本： 0.7.1 ( 2023-08-15 08:54:09)

官方网址 GitHub网址

介绍
版本
相关

TDesign

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

Version

✨ 特性

🌈 提炼自 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/>