Blazor UI library Bootstrap Blazor quick start (v7.5.7)

Blazor UI library Bootstrap Blazor quick start (v7.5.7)

The component library has been updated frequently recently, and some students feel a little confused, so I just took a class with Boss Zhang today and immediately created a new tutorial to give back to the community, ;->

1. Create a new project b18QuickStartv757 and add the project to the solution

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

2. Use nuget.org for BootstrapBlazor component installation, FreeSql sqlite library, font..

dotnet add b18QuickStartv757 package BootstrapBlazor
 dotnet add b18QuickStartv757 package BootstrapBlazor.FontAwesome
 

2. Style sheet and Javascript reference

Add the theme style sheet to the Pages/_Host.cshtml file

Delete

And add two lines below

Add Javascript references to the Pages/_Host.cshtml file

Add before

3. Add namespace reference to _Imports.razor file

@using BootstrapBlazor.Components
 

4. Add BootstrapBlazorRoot component to App.razor file

     
         ...
     
 
 

5. Add BootstrapBlazor service to Program.cs file

Add after builder.Services.AddSingleton();

builder.Services.AddBootstrapBlazor();
 

The following steps are purely personal preference, modification of the original NavMenu component

6. Create a new menu.js file

Create the modules folder in wwwroot and create a new menu.js file

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. Replace Shared\NavMenu.razor file

@inherits BootstrapModuleComponentBase
 @attribute [JSModuleAutoLoader("./modules/menu.js", Relative = false)]

 

     

         Demo
         
             
         
     

     

         

             
         
     
 
 

8. Create a new Shared\NavMenu.razor.cs file

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 = "Home", Url = "/", Match = NavLinkMatch.All},
             new MenuItem() { Text = "Counter", Url = "/counter" },
             new MenuItem() { Text = "Fetch data", Url = "/fetchdata" },
             new MenuItem() { Text = "Tools" ,Items= new List
                 {
                     new MenuItem() { Text = "Counter", Url = "/counter" },
                     new MenuItem() { Text = "Fetch data", Url = "/fetchdata" },
                }
             },
     };
 }
 

9. Replace Shared\MainLayout.razor file

@inherits LayoutComponentBase
 @using System.Reflection

 

     

         

             DEMO
         
         
     
     

         

             
         
     
 
 

10. Replace Shared\MainLayout.razor.css file

 .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 Add attribute on the next line of @page

@attribute [TabItemOption(Text = "Index")]
 

12.Run

Related project

FreeSql QQ group: 4336577

BA & Blazor QQ group: 795206915

Maui Blazor Chinese Community QQ Group: 645660665

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. You are welcome to reprint, use, and republish, but be sure to retain the article signature AlexChow (including link: https://github.com/densen2014), and may not be used for commercial purposes. Modified works based on this article must be released under the same license. If you have any questions, please contact me.

Reprint Statement

This article comes from Blog Garden, author: Alex Chow Zhou, please indicate the original link when reprinting: https://www.cnblogs.com/densen2014/p/17357815.html

AlexChow

Today’s Toutiao | Blog Park | Zhihu | Gitee | GitHub

703.png” alt=”image” loading=”lazy”>