Blazor 元件庫 Blazui 開發第一彈【安裝入門】
阿新 • • 發佈：2019-12-25
標籤： Blazor Blazui文件 Blazui
傳送門
Blazor 元件庫 Blazui 開發第一彈【安裝入門】https://www.cnblogs.com/wzxinchen/p/12096092.html
Blazor 元件庫 Blazui 開發第二彈【按鈕元件】https://www.cnblogs.com/wzxinchen/p/12096956.html
Blazui 是什麼？
Blazui 釋出有段時間了，但一直沒有寫相關的文章，現在抽時間寫點。
九個月前，我想用 Blazor 開發後臺管理系統，找了一圈愣是沒找著好用好看免費的 Blazor UI 框架，好幾次被勸退，不想找了，但又想用 Blazor，所以萌生了自己寫一個 Blazor 的 UI 框架的想法，這便是 Blazui。
沒選用 Bootstrap 的是因為它本身功能弱，如果我要搞一堆它本身沒有的功能的話意味著 CSS 我要自己寫
沒選用 Antd 是因為它沒有一個很好抄的現成的框架，很好抄的意思是指 HTML 結構清晰
目前 Blazui 只有服務端渲染，客戶端渲染待微軟出正式版
開源地址
開源地址：
https://github.com/wzxinchen/Blazui
https://gitee.com/wzxinchen/blazui
我要星星~我要Fork~
QQ交流群（新功能第一時間通知）
74522853
演示地址
http://blazui.com:9000
安裝 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.Container
@using Blazui.Component.Button
@using Blazui.Component.Dom
@using Blazui.Component.Dynamic
@using Blazui.Component.NavMenu
@using Blazui.Component.Input
@using Blazui.Component.Radio
@using Blazui.Component.Select
@using Blazui.Component.CheckBox
@using Blazui.Component.Switch
@using Blazui.Component.Table
@using Blazui.Component.Popup
@using Blazui.Component.Pagination
@using Blazui.Component.Form
@using Blazui.Component.Upload
@using Blazui.Component將 Startup.cs 的 ConfigureServices 方法替換為以下程式碼
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddBlazuiServices();
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 | [√] 常規支援 [√] 巢狀佈局 |