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
2、点击star,如下图,即可完成star,关注项目不迷路:
另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:
BootstrapAdmin 项目地址:
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 项目地址:
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群(QQ)欢迎加群讨论
BA & Blazor ①(795206915) BA & Blazor ②(675147445)
Bootstrap Blazor 模板使用(一)Layout 组件的更多相关文章
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- Blazor 模板化组件开发指南
翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...
- Bootstrap Blazor Table 组件(三)智能生成
原文链接:https://www.cnblogs.com/ysmc/p/16201153.html Bootstrap Blazor 官网地址:https://www.blazor.zone 有了解过 ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- Bootstrap Blazor 组件库
项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应 ...
随机推荐
- java面试--360
1题执行以下程序后的输出结果是()public class Test {public static void main(String[] args) {StringBuffer a = new Str ...
- 如何实现 Spring Boot 应用程序的安全性?
为了实现 Spring Boot 的安全性,我们使用 spring-boot-starter-security 依赖项,并且必须添加安全配置.它只需要很少的代码.配置类将必须扩展WebSecurity ...
- 使用SpringDataJdbc无法注册的情况
当 EnableJdbcRepositories 注解无法注册Repository仓库的时候,你可以查看下 你的实体是否存在@Table注解,没有请加上,这样就能扫描到了 @Table("b ...
- jmeter的安装使用
以前没自己做过压力测试,一直都是测试在做.现在需要自己做压力测试了,特别学习下jmeter的使用方法.现在做下记录: 1.下载jmeter,这个忽略,百度到处都是 2.打开jmeter,jmeter的 ...
- Python - 本地文件读写(初级)
- 无单位数字和行高 —— 别说你懂CSS相对单位
前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...
- 破界!Omi生态omi-mp发布,用小程序开发生成Web
omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架,基于 Web Components,用来开发 PC.手机浏览器或者微信.手Q webview ...
- Java中的反射原理以及简单运用(原理+例子)
@ 目录 学习总结 1. 为什么要使用反射 2. 反射的概念 3. Java反射加载过程 4. 反射优缺点 5. 字节码对象理解 6. 获取字节码对象(.class)的三种方式 7. 反射常用API ...
- Linux_连接工具_SecureCRT的使用教程
什么是SecureCRT? SecureCRT是一款支持 SSH2.SSH1.Telnet.Telnet/SSH.Relogin.Serial.TAPI.RAW 等协议的终端仿真程序,最吸引我的是,S ...
- Java基础之浅谈接口
前言 前几篇文章我们已经把Java的封装.继承.多态学习完了,现在我们开始比较便于我们实际操作的学习,虽然它也是Java基础部分,但是其实入门容易,精通很难. 我认真的给大家整理了一下这些必须学会.了 ...