TDesignBlazor下載TDesignBlazor源代碼下載

TDesignBlazor

三方組件

0.7.1

下載

特性

? 提煉自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/>