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 UI库 Bootstrap Blazor 快速上手 (v7.5.7)

原文链接:https://www.cnblogs.com/densen2014/archive/2023/04/27/17357815.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Blazor UI库 Bootstrap Blazor 快速上手 (v7.5.7) - Python技术站

(0)
上一篇 2023年4月27日
下一篇 2023年4月27日

相关文章

  • C#检查foreach判读是否为null的方法

    当我们使用foreach循环访问集合或数组时,必须确保集合或数组不为null,否则会抛出NullReferenceException异常。在C#中,有多种方式可以检查集合或数组是否为null,本篇攻略将带你了解其中的两种方法。 方法1:使用if判断 我们可以使用if条件语句来判断集合或数组是否为null。在使用foreach循环之前,先检查集合或数组是否为n…

    C# 2023年5月15日
    00
  • ASP.Net MVC 布局页、模板页使用方法详细介绍

    下面我将详细讲解“ASP.Net MVC布局页、模板页使用方法详细介绍”的完整攻略,过程中将包含两个示例的说明。 ASP.Net MVC布局页 ASP.Net MVC布局页用于定义网站的整体布局,例如头部、底部、导航等元素,以及将内容区域占据的html、css进行分离。 具体实现步骤如下: 创建一个布局页 在MVC项目的Views/Shared文件夹下,右键…

    C# 2023年5月31日
    00
  • C# GetHashCode():获取此实例的哈希代码

    C#中的GetHashCode()方法用于获取对象的哈希码(HashCode)。哈希码是一种用于快速识别对象的整数。哈希码的计算方法是将对象中各种不同类型的值转换成32位整数。通常,我们使用哈希表来操作对象。哈希表将哈希码作为索引,通过哈希码查找对象,这样可以非常快速地定位到对象。 以下是使用GetHashCode()方法的一些示例: 示例1: class …

    C# 2023年4月19日
    00
  • C#设计模式之Strategy策略模式解决007大破密码危机问题示例

    C#设计模式之Strategy策略模式解决007大破密码危机问题示例 策略模式介绍 策略模式(Strategy Pattern)是一种行为型设计模式,它定义了一系列算法,并将每个算法封装起来,使它们可以互相替换。 策略模式的实现方法 在策略模式中,定义一个具体的策略接口(抽象类),接口中定义公共的方法(通用的算法),具体的策略类实现这个接口,实现各自的算法。…

    C# 2023年6月1日
    00
  • 关于Python 位运算防坑指南

    下面是关于 “Python 位运算防坑指南” 的完整攻略。 什么是位运算? 通俗来说,位运算是对二进制数的操作,主要包括与(&)、或(|)、异或(^)、左移(<<)和右移(>>)。 Python 中可以用以下语法进行位运算: a & b # 与运算 a | b # 或运算 a ^ b # 异或运算 a <<…

    C# 2023年5月15日
    00
  • C#枚举的高级应用

    接下来我将为你讲解C#枚举的高级应用。 1. 枚举的定义 在C#中,枚举本质上是一种值类型,它为一组相关的常量定义了一个公共类型别名。枚举使用关键字enum定义,通常被用来表示有限集合的值,如颜色(ILenum)、星期几、月份等。 下面是一段枚举的定义示例代码: enum Directions { North, South, East, West } 上述代…

    C# 2023年5月15日
    00
  • C#表达式树Expression基础讲解

    我来详细讲解一下“C#表达式树Expression基础讲解”的完整攻略。 C#表达式树Expression基础讲解 什么是表达式树 表达式树是C#中的一种数据结构,用于表示一个表达式。表达式树实质上是编译器为了构建LINQ查询而特意设计的,而LINQ查询是基于C#语言表达式进行构造的。表达式树表示了代码中的表达式结构,即可以用树形结构表示出来。 表达式树应用…

    C# 2023年6月1日
    00
  • C# 设置Chart的X轴为时间轴​​​​​​​详情

    下面是关于C#设置Chart的X轴为时间轴的完整攻略: 步骤一:添加 NuGet 包 在 Visual Studio 中打开相应的项目,右键单击项目并选择“管理 NuGet 包”。在 NuGet 界面的搜索栏中输入“System.Windows.Forms.DataVisualization”,选择“System.Windows.Forms.DataVisu…

    C# 2023年6月1日
    00
合作推广
合作推广
分享本页
返回顶部