Blazor 組件庫 Blazui 開發入門

時間 2019-12-26

標籤 blazor 組件 blazui 開發入門简体版

原文原文鏈接

標籤： Blazor Blazui文檔 Blazuicss

Blazui 是什麼？

Blazui 發佈有段時間了，但一直沒有寫相關的文章，如今抽時間寫點。
九個月前，我想用 Blazor 開發後臺管理系統，找了一圈愣是沒找着好用好看免費的 Blazor UI 框架，好幾回被勸退，不想找了，但又想用 Blazor，因此萌生了本身寫一個 Blazor 的 UI 框架的想法，這即是 Blazui。
但我並不想本身寫 CSS，抄了 Element UI 的 CSS 和 HTML 結構，程序員的美工能奈何。
沒選用 Bootstrap 的是由於它自己功能弱，若是我要搞一堆它自己沒有的功能的話意味着 CSS 我要本身寫
沒選用 Antd 是由於它沒有一個很好抄的現成的框架，很好抄的意思是指 HTML 結構清晰
目前 Blazui 只有服務端渲染，客戶端渲染待微軟出正式版html

開源地址

開源地址：
https://github.com/wzxinchen/Blazui
https://gitee.com/wzxinchen/blazui
我要星星~我要Fork~
QQ交流羣（新功能第一時間通知）
74522853前端

演示地址

http://blazui.com:9000git

安裝 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 文件中添加如下代碼github

@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 的內容改成以下app

@inherits LayoutComponentBase
<BPopup></BPopup>

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    @Body
</div>

在任意一個頁面輸入如下代碼，運行可看效果框架

<BButton Type="@ButtonType.Primary">主要按鈕</BButton>

目前部分可用組件列表

個別用的少的不完善的沒有加入dom

組件名	調用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	[√] 常規支持 [√] 嵌套佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。