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 编写的服务器端和客户端应 ...
随机推荐
- Windows&Linux文件传输方式总结
在渗透过程中,通常会需要向目标主机传送一些文件,来达到权限提升.权限维持等目的,本篇文章主要介绍一些windows和Linux下常用的文件传输方式. Windows 利用FTP协议上传 在本地或者VP ...
- XStream类的对象将javaBean转成XML
[省市联动] servlet端: //返回数据xml(XStream) XStream xStream = new XStream(); //把路径设置别名 xStream.alias("c ...
- 什么是内部类? Static Nested Class 和 Inner Class的不同?
内部类就是在一个类的内部定义的类,内部类中不能定义静态成员. 内部类作为其外部类的一个成员,因此内部类可以直接访问外部类的成员.但有一点需要指出:静态成员不能访问非静态成员,因此静态内部类不能访问外部 ...
- Hashmap如何同步?
当我们需要一个同步的HashMap时,有两种选择: ●使用Collections.synchronizedMap(..)来同步HashMap. ●使用ConcurrentHashMap的 这两个选项之 ...
- Oracle入门基础(七)一一集合运算
SQL> /* SQL> 查询10和20号部门的员工 SQL> 1. select * from emp where deptno=10 or deptno=20; SQL> ...
- java-設計模式-原型模式
原型模式 是一种创建型设计模式, 使你能够复制已有对象, 而又无需使代码依赖它们所属的类. 問題: 如果我們要複製一個類實例: 首先, 你必须新建一个属于相同类的对象. 然后, 你必须遍历原始对象的所 ...
- Vue手动集成less预编译器
less是一门css预处理语言,简单的说就是在css的基础上提升为可编程性的预编译器 需要在项目中安装 less ,less-loader 2个插件,语法为:npm i -D less less-lo ...
- TOP 10 开源的推荐系统简介
最 近这两年推荐系统特别火,本文搜集整理了一些比较好的开源推荐系统,即有轻量级的适用于做研究的SVDFeature.LibMF.LibFM等,也有重 量级的适用于工业系统的 Mahout.Oryx ...
- 一个好用的swagger第三方ui-xiaoymin
swagger自带的ui界面实在是看的难受 配置完默认访问地址:ip:port/swagger-ui.html 推荐一个好用的第三方ui,界面如图: 使用方法: 1.添加依赖 <dependen ...
- java中Array(数组)的用法
8.Array(数组) 数组是作为对象来实现的.(really occupy the memopry,真实的占用内存 ) An array is a data structure that st ...