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

2022-04-27 00:05:14 阅读：198 来源： 互联网

标签：false Bootstrap 侧边 bool 组件 Layout Blazor true 模板

原文链接：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）

标签：false,Bootstrap,侧边,bool,组件,Layout,Blazor,true,模板
来源： https://www.cnblogs.com/ysmc/p/16197223.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9