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

来源:https://www.cnblogs.com/densen2014/archive/2023/04/27/17357815.html
-Advertisement-
Play Games

最近組件庫更新比較頻繁,有些同學感覺有點迷茫,就著今天剛上了張老闆一節課立馬擼個新的上手教程回饋社區, ;-> 1.新建工程b18QuickStartv757,將項目添加到解決方案中 dotnet new blazorserver -o b18QuickStartv757 dotnet sln ad ...


最近組件庫更新比較頻繁,有些同學感覺有點迷茫,就著今天剛上了張老闆一節課立馬擼個新的上手教程回饋社區, ;->

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

關聯項目

FreeSql QQ群:4336577

BA & Blazor QQ群:795206915

Maui Blazor 中文社區 QQ群:645660665

知識共用許可協議

本作品採用 知識共用署名-非商業性使用-相同方式共用 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發佈,但務必保留文章署名AlexChow(包含鏈接: https://github.com/densen2014 ),不得用於商業目的,基於本文修改後的作品務必以相同的許可發佈。如有任何疑問,請與我聯繫

轉載聲明

本文來自博客園,作者:周創琳 AlexChow,轉載請註明原文鏈接:https://www.cnblogs.com/densen2014/p/17357815.html

AlexChow

今日頭條 | 博客園 | 知乎 | Gitee | GitHub

image


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 異常處理 異常 異常即是一個事件,該事件會在程式執行過程中發生,影響了程式的正常執行。 一般情況下,在Python無法正常處理程式時就會發生一個異常。 異常是Python對象,表示一個錯誤。 當Python腳本發生異常時我們需要捕獲處理它,否則程式會終止執行。 捕獲異常 異常類型捕獲 # 捕獲常規異 ...
  • 教程簡介 Java 8 (又稱為 jdk 1.8) 是 Java 語言開發的一個主要版本。 Java 8 是oracle公司於2014年3月發佈,可以看成是自Java 5 以來最具革命性的版本。Java 8為Java語言、編譯器、類庫、開發工具與JVM帶來了大量新特性。 Java 8入門教程 - 從 ...
  • 教程簡介 XAML是eXtensible Application Markup Language的英文縮寫,相應的中文名稱為可擴展應用程式標記語言,它是微軟公司為構建應用程式用戶界面而創建的一種新的描述性語言。XAML提供了一種便於擴展和定位的語法來定義和程式邏輯分離的用戶界面,而這種實現方式和AS ...
  • 協程 進程和線程 進程 ​ 當運行一個應用程式的時候,操作系統會為這個應用程式啟動一個進程。可以將這個進程看作一個包含了應用程式在運行中需要用到和維護的各種資源的容器。這些資源包括但不限於記憶體地址空間、文件和設備的句柄以及線程 線程 ​ 一個線程是一個執行空間,這個空間會被操作系統調度來運行函數中所 ...
  • 編譯 簡單就是把代碼跑一哈,然後我們的代碼 .java文件 就被編譯成了 .class 文件 反編譯 就是針對編譯生成的 jar/war 包 裡面的 .class 文件 逆向還原回來,可以看到你的代碼寫的啥。 比較常用的反編譯工具 JD-GUI ,直接把編譯好的jar丟進去,大部分都能反編譯看到源碼 ...
  • 1.1堆空間結構 Java 的自動記憶體管理主要是針對對象記憶體的回收和對象記憶體的分配。同時,Java 自動記憶體管理最核心的功能是 堆 記憶體中對象的分配與回收。Java 堆是垃圾收集器管理的主要區域,因此也被稱作 GC 堆。Eden 區、兩個 Survivor 區 S0 和 S1 都屬於新生代,中間一層 ...
  • 靜態域 **如果將域定義為 static,每個類中只有一個這樣的域。而每一個對象對於所有的實例域卻都有自己的一份拷貝。**例如,假定需要給每一個雇員賦予唯一的標識碼。這裡給 Employee 類添加一個實例域 id 和一個靜態域 nextld: class Employee { private st ...
  • #include <stdlib.h> int main() { // 定義要打開的URL char* url = "https://rjku.gitee.io/"; // 調用系統命令以預設瀏覽器打開URL char command[100]; sprintf(command, "open %s" ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...