標簽： Blazor Blazui文檔 Blazui
Blazui 是什么？
Blazui 發布有段時間了，但一直沒有寫相關的文章，現在抽時間寫點。
九個月前，我想用 Blazor 開發后台管理系統，找了一圈愣是沒找着好用好看免費的 Blazor UI 框架，好幾次被勸退，不想找了，但又想用 Blazor，所以萌生了自己寫一個 Blazor 的 UI 框架的想法，這便是 Blazui。
但我並不想自己寫 CSS，抄了 Element UI 的 CSS 和 HTML 結構，程序員的美工能奈何。
沒選用 Bootstrap 的是因為它本身功能弱，如果我要搞一堆它本身沒有的功能的話意味着 CSS 我要自己寫
沒選用 Antd 是因為它沒有一個很好抄的現成的框架，很好抄的意思是指 HTML 結構清晰
目前 Blazui 只有服務端渲染，客戶端渲染待微軟出正式版
開源地址
開源地址：
https://github.com/wzxinchen/Blazui
https://gitee.com/wzxinchen/blazui
我要星星我要Fork
QQ交流群（新功能第一時間通知）
74522853
演示地址
安裝 Blazui 到 Blazor 項目
使用前提
- 安裝 .Net Core 3.1
- 安裝 VS2019，更新到最新版
安裝步驟
- 新建 Blazor 服務器端渲染應用
- 安裝 Nuget 包 Blazui.Component
- 修改 Pages 文件夾下的 _Host.cshtml 為以下內容
@page "/"
@namespace Blazui.ServerRender.Pages //這里的 Blazui.ServerRender 需要變為你實際的命名空間
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazui, Element的blazor版本，用 .Net 寫前端的 UI 框架，開箱即用</title>
<base href="~/" />
<link href="css/site.css" rel="stylesheet" />
<link rel="stylesheet" href="/_content/Blazui.Component/css/index.css" />
<link rel="stylesheet" href="/_content/Blazui.Component/css/fix.css" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_content/Blazui.Component/js/dom.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
其中
- index.css 文件是 Element 的樣式文件
- dom.js 文件是 Blazui 自身需要的 js文件
- fix.css 文件是 Blazui 對 Element 補充的樣式文件
在 _Imports.razor 文件中添加以下代碼
@using Blazui.Component
將 Startup.cs 的 ConfigureServices 方法替換為以下代碼
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddHttpClient();
services.AddServerSideBlazor();
services.AddBlazuiServicesAsync().Wait();
services.AddSingleton<WeatherForecastService>();
}
為了使彈窗類組件生效，需要將 MainLayout.razor 的內容改為如下
@inherits LayoutComponentBase
<BPopup></BPopup>
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
@Body
</div>
在任意一個頁面輸入以下代碼，運行可看效果
<BButton Type="@ButtonType.Primary">主要按鈕</BButton>
目前部分可用組件列表
個別用的少的不完善的沒有加入
| 組件名 | 調用Demo | 功能支持 |
|---|---|---|
| 按鈕 | http://blazui.com:9000/button | [√] 常規支持 |
| 輸入框 | http://blazui.com:9000/input | [√] 常規支持 |
| 單選框 | http://blazui.com:9000/radio | [√] 常規支持 [√] 按鈕單選框 [√] 單選框組 [√] 按鈕單選框組 [√] 帶邊框的單選框 |
| 復選框 | http://blazui.com:9000/checkbox | [√] 常規支持 [√] 按鈕復選框 [√] 復選框組 [√] 按鈕復選框組 |
| 下拉框 | http://blazui.com:9000/select | [√] 常規支持 [√] 選項可禁用 |
| 切換組件 | http://blazui.com:9000/switch | [√] 常規支持 [√] 自定義狀態文本 |
| 菜單 | http://blazui.com:9000/menu | [√] 常規支持 [√] 橫向菜單 [√] 堅向菜單 [√] 二級菜單 [√] 自定義背景色 [×] 多級菜單 |
| 標簽頁 | http://blazui.com:9000/tabs | [√] 常規支持 [√] 自定義選項卡樣式 [√] 自定義卡片位置 [√] 可移除新增 |
| 表格 | http://blazui.com:9000/table | [√] 常規支持 [√] 自動生成列 [√] 斑馬條紋 [√] 分頁 [√] 自定義列內容 [√] 表頭鎖定 [√] 復選框列 [√] 表格邊框 [√] 自適應寬度高度 |
| 消息 | http://blazui.com:9000/message | [√] 常規支持 [√] 四種消息類型 |
| 分頁 | http://blazui.com:9000/pagination | [√] 常規支持 |
| 加載中 | http://blazui.com:9000/loading | [√] 常規支持 [√] 自定義背景顏色、圖標、文字 [√] 全屏加載 [√] 部分加載 |
| 消息彈窗 | http://blazui.com:9000/messagebox | [√] 常規支持 [√] Alert彈窗 [√] Confirm 彈窗 [√] 無回調 |
| 對話框 | http://blazui.com:9000/dialog | [√] 常規支持 [√] 嵌套彈窗 [√] 指定寬度 [√] 無回調 |
| 日期選擇器 | http://blazui.com:9000/datepicker | [√] 常規支持 [√] 指定日期格式 |
| Form 表單 | http://blazui.com:9000/form | [√] 常規支持 [√] 三種對齊方式 [√] 單行表單 |
| 布局面板 | http://blazui.com:9000/layout | [√] 常規支持 [√] 嵌套布局 |