(资料图片仅供参考)

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

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

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

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

dotnet add b18QuickStartv757 package BootstrapBlazordotnet add b18QuickStartv757 package BootstrapBlazor.FontAwesome

2.样式表和Javascript 引用

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

删除

并在下面添加两行

添加 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 文件中

            ...    

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

在 builder.Services.AddSingleton();后加入

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)]
    
        Demo                                
    
        
                    
    

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

using BootstrapBlazor.Components;using Microsoft.AspNetCore.Components.Routing;namespace b18QuickStartv757.Shared;public partial class NavMenu{    private IEnumerable Menus { get; set; } = new List    {            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                {                    new MenuItem() { Text = "Counter", Url = "/counter" },                    new MenuItem() { Text = "Fetch data", Url = "/fetchdata" },               }            },    };}

9. 替换 Shared\MainLayout.razor文件

@inherits LayoutComponentBase@using System.Reflection
    
        
            DEMO        
            
    
        
                    
    

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

关键词：