Blazor UI库 Bootstrap Blazor 快速上手 (v7.5.7)

Posted AlexChow

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Blazor UI库 Bootstrap Blazor 快速上手 (v7.5.7)相关的知识，希望对你有一定的参考价值。

最近组件库更新比较频繁,有些同学感觉有点迷茫,就着今天刚上了张老板一节课立马撸个新的上手教程回馈社区, ;->

1.新建工程b18QuickStartv757,将项目添加到解决方案中

dotnet new blazorserver -o b18QuickStartv757
dotnet sln add b18QuickStartv757/b18QuickStartv757.csproj

2.使用 nuget.org 进行 BootstrapBlazor 组件安装, FreeSql sqlite库,字体 ..

dotnet add b18QuickStartv757 package BootstrapBlazor
dotnet add b18QuickStartv757 package BootstrapBlazor.FontAwesome

2.样式表和Javascript 引用

增加主题样式表到 Pages/_Host.cshtml 文件中

删除 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

并在下面添加两行

<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

添加 Javascript 引用到 Pages/_Host.cshtml 文件中

在 <script src="_framework/blazor.server.js"></script> 之前添加

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>

3.添加增加命名空间引用到 _Imports.razor 文件中

@using BootstrapBlazor.Components

4.增加 BootstrapBlazorRoot 组件到 App.razor 文件中

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly">
        ...
    </Router>
</BootstrapBlazorRoot>

5.添加BootstrapBlazor服务到 Program.cs 文件中

在 builder.Services.AddSingleton<WeatherForecastService>(); 后加入

builder.Services.AddBootstrapBlazor();

以下步骤纯属个人喜好 , 改造原版 NavMenu 组件

6. 新建 menu.js 文件

在 wwwroot 建立 modules文件夹, 新建 menu.js 文件

import Data from "../_content/BootstrapBlazor/modules/data.js";
import EventHandler from "../_content/BootstrapBlazor/modules/event-handler.js";

export function init(id) 
    var el = document.getElementById(id)
    if (el === null) 
        return
    
    const navbar = el.querySelector(\'.navbar-toggler\')
    const menu = el.querySelector(\'.sidebar-content\')
    const nav =  navbar, menu 
    Data.set(id, nav)

    EventHandler.on(navbar, \'click\', () => 
        menu.classList.toggle(\'show\')
    )
    EventHandler.on(menu, \'click\', \'.nav-link\', e => 
        const link = e.delegateTarget
        const url = link.getAttribute(\'href\');
        if (url !== \'#\') 
            menu.classList.remove(\'show\')
        
    )


export function dispose(id) 
    const nav = Data.get(id)
    if (nav) 
        EventHandler.off(nav.navbar, \'click\');
        EventHandler.off(nav.menu, \'click\', \'.nav-link\');

7. 替换 Shared\\NavMenu.razor 文件

@inherits BootstrapModuleComponentBase
@attribute [JSModuleAutoLoader("./modules/menu.js", Relative = false)]

<div id="@Id">
    <div class="navbar d-flex d-md-none px-3">
        <a class="navbar-brand" href="">Demo</a>
        <button class="navbar-toggler" aria-label="toggle">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

    <div class="sidebar-content collapse d-md-block">
        <div class="scroll">
            <Menu Items="@Menus" IsVertical="true" IsAccordion="true" IsExpandAll="true" />
        </div>
    </div>
</div>

8. 新建 Shared\\NavMenu.razor.cs 文件

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components.Routing;

namespace b18QuickStartv757.Shared;

public partial class NavMenu

    private IEnumerable<MenuItem> Menus  get; set;  = new List<MenuItem>
    
            new MenuItem()  Text = "首页", Url = "/"  , Match = NavLinkMatch.All,
            new MenuItem()  Text = "Counter", Url = "/counter" ,
            new MenuItem()  Text = "Fetch data", Url = "/fetchdata" ,
            new MenuItem()  Text = "工具" ,Items= new List<MenuItem>
                
                    new MenuItem()  Text = "Counter", Url = "/counter" ,
                    new MenuItem()  Text = "Fetch data", Url = "/fetchdata" ,
               
            ,
    ;

9. 替换 Shared\\MainLayout.razor 文件

@inherits LayoutComponentBase
@using System.Reflection

<section class="section">
    <div class="sidebar">
        <div class="sidebar-title">
            <span class="sidebar-text">DEMO</span>
        </div>
        <NavMenu />
    </div>
    <div class="main">
        <div class="content px-3">
            <Tab ClickTabToNavigation="true"
                 ShowExtendButtons="true"
                 ShowClose="true"
                 Body=@Body />
        </div>
    </div>
</section>

10. 替换 Shared\\MainLayout.razor.css 文件


.layout-main .main 
    background: rgba(16, 142, 233, 1);
    color: #fff;
    min-height: 120px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;


.main 
    flex: 1;


.sidebar .navbar-brand 
    font-size: 1.1rem;


.sidebar .nav-item 
    font-size: 0.875rem;
    padding-left: 6px;


    .sidebar .nav-item a 
        color: #444;
        border-radius: var(--bs-border-radius);
        display: flex;
        align-items: center;
        padding: .25rem 1.5rem;
        font-weight: 400;
    

.sidebar .navbar 
    --bb-bg-navbar: #8548ff;
    background-color: var(--bb-bg-navbar);


.sidebar .sidebar-title 
    display: none;


.sidebar-text 
    font-weight: 700;


.menu .nav-link.nav-table 
    color: var(--bs-info);
    font-weight: bold;


    .menu .nav-link.nav-table:hover 
        color: unset;
    

@media (max-width: 767.98px) 
    .main .top-row:not(.auth) 
        display: none;
    

    .main .top-row.auth 
        justify-content: space-between;
    

    .main .top-row a, .main .top-row .btn-link 
        margin-left: 0;
    


@media (min-width: 768px) 
    .section 
        flex-direction: row;
        display: flex;
    

    .sidebar 
        width: var(--bs-sidebar-width);
        height: calc(100vh);
        position: sticky;
        top: 0;
        border-right: solid 1px #c0c4cc;
        background-color: #f0f0f0;
        display: flex;
        flex-direction: column;
        margin-top: calc(var(--bs-header-height)*-1);
    

        .sidebar .sidebar-content 
            height: calc(100vh - var(--bs-header-height));
        

            .sidebar .sidebar-content.collapse 
                display: flex;
                flex-direction: column;
            

        .sidebar .sidebar-title 
            height: 50px;
            display: flex;
            align-items: center;
            padding: 1rem;
            border-bottom: solid 1px #c0c4cc;
        

        .sidebar .scroll 
            overflow-x: hidden;
            max-height: calc(100% - 36px);
            padding: 5px 0;
        

            .sidebar .scroll .menu 
                width: var(--bs-sidebar-width);

11. Index.razor 在@page下一行添加 attribute

@attribute [TabItemOption(Text = "Index")]

12. 运行

Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍

轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时，右下角给予适当的提示信息 <ToastBox class="d-block" Options="@Options1" /> @code Options1 = new Toast

以上是关于Blazor UI库 Bootstrap Blazor 快速上手 (v7.5.7)的主要内容，如果未能解决你的问题，请参考以下文章

初识MASA Blazor

Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍

Bootstrap Blazor 实战 Markdown 编辑器使用

值得推荐的Blazor UI组件库

Blazor学习之旅 MudBlazor组件库介绍

基于TDesign风格的Blazor企业级UI组件库