原文链接: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 组件的更多相关文章

  1. Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  2. Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  3. Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  4. Blazor 模板化组件开发指南

    翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...

  5. Bootstrap Blazor Table 组件(三)智能生成

    原文链接:https://www.cnblogs.com/ysmc/p/16201153.html Bootstrap Blazor 官网地址:https://www.blazor.zone 有了解过 ...

  6. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  7. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  8. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  9. Bootstrap Blazor 组件库

    项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应 ...

随机推荐

  1. Windows&Linux文件传输方式总结

    在渗透过程中,通常会需要向目标主机传送一些文件,来达到权限提升.权限维持等目的,本篇文章主要介绍一些windows和Linux下常用的文件传输方式. Windows 利用FTP协议上传 在本地或者VP ...

  2. XStream类的对象将javaBean转成XML

    [省市联动] servlet端: //返回数据xml(XStream) XStream xStream = new XStream(); //把路径设置别名 xStream.alias("c ...

  3. 什么是内部类? Static Nested Class 和 Inner Class的不同?

    内部类就是在一个类的内部定义的类,内部类中不能定义静态成员. 内部类作为其外部类的一个成员,因此内部类可以直接访问外部类的成员.但有一点需要指出:静态成员不能访问非静态成员,因此静态内部类不能访问外部 ...

  4. Hashmap如何同步?

    当我们需要一个同步的HashMap时,有两种选择: ●使用Collections.synchronizedMap(..)来同步HashMap. ●使用ConcurrentHashMap的 这两个选项之 ...

  5. Oracle入门基础(七)一一集合运算

    SQL> /* SQL> 查询10和20号部门的员工 SQL> 1. select * from emp where deptno=10 or deptno=20; SQL> ...

  6. java-設計模式-原型模式

    原型模式 是一种创建型设计模式, 使你能够复制已有对象, 而又无需使代码依赖它们所属的类. 問題: 如果我們要複製一個類實例: 首先, 你必须新建一个属于相同类的对象. 然后, 你必须遍历原始对象的所 ...

  7. Vue手动集成less预编译器

    less是一门css预处理语言,简单的说就是在css的基础上提升为可编程性的预编译器 需要在项目中安装 less ,less-loader 2个插件,语法为:npm i -D less less-lo ...

  8. TOP 10 开源的推荐系统简介

      最 近这两年推荐系统特别火,本文搜集整理了一些比较好的开源推荐系统,即有轻量级的适用于做研究的SVDFeature.LibMF.LibFM等,也有重 量级的适用于工业系统的 Mahout.Oryx ...

  9. 一个好用的swagger第三方ui-xiaoymin

    swagger自带的ui界面实在是看的难受 配置完默认访问地址:ip:port/swagger-ui.html 推荐一个好用的第三方ui,界面如图: 使用方法: 1.添加依赖 <dependen ...

  10. java中Array(数组)的用法

    8.Array(数组)    数组是作为对象来实现的.(really occupy the memopry,真实的占用内存 ) An array is a data structure that st ...