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. 运行