原文鏈接：https://www.cnblogs.com/ysmc/p/16197223.html BootstrapBlazor 官網地址：https://www.blazor.zone Bootstrap Blazor 提供了一個快速創建項目的項目模板，安裝方法可參考我這一篇文章：Bootstr ...
原文鏈接：https://www.cnblogs.com/ysmc/p/16197223.html
BootstrapBlazor 官網地址：https://www.blazor.zone
Bootstrap Blazor 提供了一個快速創建項目的項目模板，安裝方法可參考我這一篇文章：Bootstrap Blazor 使用模板創建項目 - 一事冇誠 - 博客園 (cnblogs.com)
模板項目預設啟用 Tab 多標簽模式，你可以在 MainLayout.razor 中將 UseTabSet 設置成 false 關閉該模式，頁面其實使用的是 Layout 組件，所以可以自己根據需求，隨意開啟或關閉一些功能，非常的方便；
很多小伙伴都很喜歡預設的 多標簽 模式，這滿足了很多需要頻繁也換頁面的需求，畢竟切換一下，頁面就重載了誰都受不了；而使用過程中，就有小伙伴有疑問了，我能不能根據以下需要，動態去改變標簽的名字呢，如一些報表，需要我在創建的時候先輸入名稱，創建後我希望在 標簽 中顯示我剛剛填寫的名稱，需要怎麼做呢？
所以我們的組件就相容了這樣的場景，使用聯級傳參的方法，你就可以輕鬆的做到。
[CascadingParameter] [NotNull] private TabItem? TabItem { get; set; } private void ChangeText() { TabItem.SetText("新的名字"); }
藉此，簡單介紹一下我們的 Layout 組件
Layout
用於佈局的容器組件，方便快速搭建頁面的基本結構：
Container：外層容器。當子元素中包含 Header 或 Footer 時，全部子元素會垂直上下排列，否則會水平左右排列。
Header：頂欄容器 Side：側邊欄容器 Main：主要區域容器 Footer：底欄容器
組件概述
Layout：佈局容器，其下可嵌套 Header Sider Main Footer 或 Layout 本身，可以放在任何父容器中 Header：頂部佈局，自帶預設樣式，其下可嵌套任何元素 Sider：側邊欄，自帶預設樣式及基本功能，其下可嵌套任何元素 Main：內容部分，自帶預設樣式，其下可嵌套任何元素 Footer：底部佈局，自帶預設樣式，其下可嵌套任何元素
上中下佈局
中部左右結構佈局
左右結構
自定義側邊欄寬度支持百分比
通過設置 SideWidth 屬性控制側邊欄寬度，支持百分比寫法，設置 0 時關閉設置寬度功能，採用內部子控制項撐滿寬度特性
Attributes 屬性
| 參數 | 說明 | 類型 | 可選值 | 預設值 |
|---|---|---|---|---|
| Header | 頁頭組件模板 | RenderFragment | — | — |
| Side | 側邊欄組件模板 | RenderFragment | — | — |
| SideWidth | 側邊欄寬度，支持百分比，設置 0 時關閉寬度功能 | string | — | 300px |
| Main | 內容組件模板 | RenderFragment | — | — |
| Footer | 側邊欄組件模板 | RenderFragment | — | — |
| Menus | 整頁面佈局時側邊欄菜單數據集合 | IEnumerable<MenuItem> | — | — |
| IsFullSide | 側邊欄是否占滿整個左邊 | bool | true|false | false |
| IsPage | 是否為整頁面佈局 | bool | true|false | false |
| IsFixedFooter | 是否固定 Footer 組件 | bool | true|false | false |
| IsFixedHeader | 是否固定 Header 組件 | bool | true|false | false |
| ShowCollapseBar | 是否顯示收縮展開 Bar | bool | true|false | false |
| ShowFooter | 是否顯示 Footer 模板 | bool | true|false | false |
| ShowGotoTop | 是否顯示返回頂端按鈕 | bool | true|false | false |
| UseTabSet | 是否開啟多標簽模式 | bool | true|false | false |
| AdditionalAssemblies | 額外程式集合，傳遞給 Tab 組件使用 | IEnumerable<Assembly> | — | — |
| OnCollapsed | 收縮展開回調委托 | Func<bool, Task> | — | — |
| OnClickMenu | 點擊菜單項時回調委托 | Func<bool, MenuItem> | — | — |
| TabDefaultUrl | 設置 Tab 組件預設標簽頁 | string? | — | — |
更多詳情，請移步至逛網：傳送門......
寫在最後
Bootstrap Blazor 官網地址：https://www.blazor.zone
希望大佬們看到這篇文章，能給項目點個star支持下，感謝各位！
star流程：
1、訪問點擊項目鏈接：BootstrapBlazor 
2、點擊star，如下圖，即可完成star，關註項目不迷路：
另外還有兩個GVP項目，大佬們方便的話也點下star唄，非常感謝：
BootstrapAdmin 項目地址：
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 項目地址：
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群（QQ）歡迎加群討論
BA & Blazor ①（795206915） BA & Blazor ②（675147445）
