如何使用Blazor組件庫Blazui

本篇內(nèi)容主要講解“如何使用Blazor組件庫Blazui”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“如何使用Blazor組件庫Blazui”吧!

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、廣州網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為廣州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

Blazui 是什么？

Blazui 發(fā)布有段時間了，但一直沒有寫相關(guān)的文章，現(xiàn)在抽時間寫點。九個月前，我想用 Blazor 開發(fā)后臺管理系統(tǒng)，找了一圈愣是沒找著好用好看免費的 Blazor UI 框架，好幾次被勸退，不想找了，但又想用 Blazor，所以萌生了自己寫一個 Blazor 的 UI 框架的想法，這便是 Blazui。但我并不想自己寫 CSS，抄了 Element UI 的 CSS 和 HTML 結(jié)構(gòu)，程序員的美工能奈何。沒選用 Bootstrap 的是因為它本身功能弱，如果我要搞一堆它本身沒有的功能的話意味著 CSS 我要自己寫沒選用 Antd 是因為它沒有一個很好抄的現(xiàn)成的框架，很好抄的意思是指 HTML 結(jié)構(gòu)清晰目前 Blazui 只有服務(wù)端渲染，客戶端渲染待微軟出正式版。

安裝 Blazui 到 Blazor 項目

使用前提

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

安裝步驟

新建 Blazor 服務(wù)器端渲染應(yīng)用
安裝 Nuget 包 Blazui.Component
修改 Pages 文件夾下的 _Host.cshtml 為以下內(nèi)容

@page "/"
@namespace Blazui.ServerRender.Pages //這里的 Blazui.ServerRender 需要變?yōu)槟銓嶋H的命名空間
@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 的內(nèi)容改為如下

@inherits LayoutComponentBase
<BPopup></BPopup>

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

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

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

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

到此，相信大家對“如何使用Blazor組件庫Blazui”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁名稱：如何使用Blazor組件庫Blazui
瀏覽路徑：http://m.rwnh.cn/article48/pgspep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站制作、企業(yè)網(wǎng)站制作、軟件開發(fā)、做網(wǎng)站、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何使用Blazor組件庫Blazui

Blazui 是什么？

安裝 Blazui 到 Blazor 項目

使用前提

安裝步驟

Blazui 是什么？