Logo

Bootstrap Blazor 模板使用(一)Layout 组件

photo

2022年05月06日


Bootstrap Blazor 模板使用(一)Layout 组件

原文链接: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   star

2、点击star,如下图,即可完成star,关注项目不迷路:

 

另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:

  BootstrapAdmin 项目地址:star
  https://gitee.com/LongbowEnterprise/BootstrapAdmin

  SliderCaptcha 项目地址:star
  https://gitee.com/LongbowEnterprise/SliderCaptcha

 

交流群(QQ)欢迎加群讨论

       BA & Blazor ①(795206915)          BA & Blazor ②(675147445)

posted @ 2022-04-26 23:43 一事冇诚 阅读(445) 评论(4编辑 收藏 举报

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
所有附件
该文章没有附件.
本文为原创文章,请注意保留出处!

留言板

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

C#/VB.NET 合并PDF页面 2022年04月30日

本文以C#及vb.net代码为例介绍如何来实现合并PDF页面内容。本文中的合并并非将两个文档简单合并...C#/VB.NET合并PDF页面

热门文章

Windows Server IIS+ARR反向代理(配置反向代理服务器) 1.概念说明:反向代理反向代理服务器位于用户与目标服务器之间,但是对于用户而言,反向代理服务器就相...WindowsServerIIS+ARR反向代理(配置反向代理服务器) 作者:Pastore Antonio
1618 浏览量
ffmpeg 生成水印 1:先要配置ffmpeg的滤镜:参考:https://www.jianshu.com/p/9d24...ffmpeg生成水印 作者:Pastore Antonio
1527 浏览量
Navicat Premium 12.0.22 安装与破解 一、安装  NavicatPremium12.0.22的下载链接:https://pan.ba...NavicatPremium12.0.22安装与破解 作者:Pastore Antonio
1472 浏览量
谷歌浏览器扩展程序报错 The message port closed before a response was received. 问题描述ChromeExtension报错:Uncheckedruntime.lastEr...谷歌浏览器扩展程序报错Themessageportclosedbeforearesponsewasreceived. 作者:Pastore Antonio
1463 浏览量
天地光阴,唯深情可依 如果光阴把一切席卷而去,最后剩下的,一定是一抹幽兰。如果爱情把一切席卷而去,最后留下的,也定是带着蓝色记忆的最初的心动。 作者:Pastore Antonio
1460 浏览量