Bootstrap Blazor 模板使用（一）Layout 組件

2022 年 4 月 27 日
筆記
Blazor, BootstrapBlazor, c#

原文鏈接：//www.cnblogs.com/ysmc/p/16197223.html

BootstrapBlazor 官網地址：//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?	—	—