Blazor 元件庫 Blazui 開發入門

語言: CN / TW / HK
時間 2021-04-15 11:02:05

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

 

演示地址

http://blazui.com:9000

 

安裝 Blazui 到 Blazor 專案

 

使用前提

  1. 安裝 .Net Core 3.1
  2. 安裝 VS2019，更新到最新版

 

安裝步驟

  1. 新建 Blazor 伺服器端渲染應用image.png-49.6kB
  2. 安裝 Nuget 包 Blazui.Component
  3. 修改 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>

 

image.png-21.5kB

 

目前部分可用元件列表

個別用的少的不完善的沒有加入http://www.fuke029.com/

「」
「」