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

树立导弹人 发表于 2023-4-27 04:13:02

最近组件库更新比较频繁,有些同学感觉有点迷茫,就着今天刚上了张老板一节课立马撸个新的上手教程回馈社区,;->
1.新建工程b18QuickStartv757,将项目添加到解决方案中

dotnet new blazorserver -o b18QuickStartv757
dotnet sln add b18QuickStartv757/b18QuickStartv757.csproj2.使用 nuget.org 进行 BootstrapBlazor 组件安装, FreeSql sqlite库,字体 ..

dotnet add b18QuickStartv757 package BootstrapBlazor
dotnet add b18QuickStartv757 package BootstrapBlazor.FontAwesome2.样式表和Javascript 引用

增加主题样式表到 Pages/_Host.cshtml 文件中
删除
并在下面添加两行
添加 Javascript 引用到 Pages/_Host.cshtml 文件中
在之前添加
3.添加增加命名空间引用到 _Imports.razor 文件中

@using BootstrapBlazor.Components4.增加 BootstrapBlazorRoot 组件到 App.razor 文件中

<BootstrapBlazorRoot>
<Router AppAssembly="@typeof(App).Assembly">
   ...
</Router>
</BootstrapBlazorRoot>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

   <atarget="_blank" href="https://www.cnblogs.com/">Demo</a>
   <buttonaria-label="toggle">

   </button>


         <Menu Items="@Menus" IsVertical="true" IsAccordion="true" IsExpandAll="true" />

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 >


         DEMO

   <NavMenu />


         <Tab ClickTabToNavigation="true"
            ShowExtendButtons="true"
            ShowClose="true"
            Body=@Body />


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

来源:https://www.cnblogs.com/densen2014/archive/2023/04/27/17357815.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

页: [1]

翼度科技's Archiver

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