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#实现简单的二叉查找树

    接下来,我将为你讲解如何使用 C# 实现简单的二叉查找树(BST)。我们先从 BST 的定义说起。 什么是二叉查找树? 二叉查找树是一种数据结构,它实现了对于数据的快速搜索。一个二叉查找树是由一个根节点和两个子树组成的。左子树下面的所有节点的值都小于根节点的值,右子树下面的所有节点的值都大于根节点的值。 下面我们来看一下如何进行二叉查找树的实现: 实现步骤 …

    C# 2023年6月6日
    00
  • C#获取本机IP地址(ipv4)

    获取本机IP地址是在编程过程中常用的功能之一,本文将详细讲解如何使用C#获取本机IP地址(ipv4)。 获取本机IP地址的代码 下面是获取本机IP地址的C#代码: using System.Net; using System.Net.Sockets; IPHostEntry ipHostInfo = Dns.GetHostEntry(Dns.GetHostN…

    C# 2023年6月7日
    00
  • C# 用什么方法将BitConverter.ToString产生字符串再转换回去

    要将BitConverter.ToString产生的字符串再转换回为二进制数据,可以使用以下两种方法: 1. 使用BitConverter.GetBytes和Convert.FromHexString 可以使用BitConverter.GetBytes将一个十六进制字符串转换为等效的字节数组,然后使用Convert.FromHexString将该数组转换为二…

    C# 2023年6月7日
    00
  • C#实现将程序运行信息写入日志的方法

    针对C#实现将程序运行信息写入日志的方法,可以分为以下几个步骤: 1.引入日志框架 要实现将程序运行信息写入日志,我们需要引入一个日志框架(logging framework),比如log4net、NLog等。这些日志框架拥有强大的日志记录功能,能够对应用程序进行日志记录。 以使用log4net为例,在Visual Studio项目中引入log4net及其相…

    C# 2023年6月1日
    00
  • 关于C#操作文件路径(Directory)的常用静态方法详解

    关于C#操作文件路径(Directory)的常用静态方法详解 Directory类的简介 在C#中,Directory类提供了用于操作文件夹和文件路径的静态方法。它通过一系列的静态方法,可以实现对于文件夹以及文件路径的各种操作。常用的静态方法有以下几种: Directory.Exists(string path):判断某个路径是否存在 Directory.C…

    C# 2023年5月15日
    00
  • ASP.NET MVC使用Quartz.NET执行定时任务

    以下是“ASP.NET MVC使用Quartz.NET执行定时任务”的完整攻略: 什么是Quartz.NET Quartz.NET是一个开源的作业调度框架,可以用于在.NET应用程序中执行定时任务。提供了一种简单而强大的方式来调度和执行作业,支持多种触发器类型,如简单触发器、Cron触发器等。 ASP.NET MVC使用Quartz.NET执行定时任务的步骤…

    C# 2023年5月12日
    00
  • 深入浅析C#中单点登录的原理和使用

    深入浅析C#中单点登录的原理和使用 单点登录 (Single Sign-On, SSO) 是一种常见的身份认证方式,允许用户在多个应用中使用同一套凭据进行登录,而不需要重复输入用户名和密码。本文将详细讲解 C# 中单点登录的原理和使用。 原理 单点登录的实现原理涉及到以下三个方面: 身份认证 凭据共享 会话管理 身份认证 在单点登录过程中,用户只需要认证一次…

    C# 2023年5月31日
    00
  • c# 断点续传的实现

    C# 断点续传的实现攻略 什么是断点续传 断点续传是指当网络传输中断或者用户主动暂停传输时,继续从中断或者暂停的地方继续传输,以达到复制大文件的目的。断点续传技术可以减少文件传输的时间,同时避免重复传输已经传输过的文件,减轻服务器负担,提高传输成功率和效率。 在 C# 中,我们可以通过一些类库和方法来实现断点续传功能。 实现断点续传的步骤 以下是基本的实现步…

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