原文鏈接：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）
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464950.html
標籤：.NET技术