Bootstrap Blazor 模板使用Layout 组件

2022年5月13日07:56:28

BootstrapBlazor 官网地址:https://www.blazor.zone

  Bootstrap Blazor 提供了一个快速创建项目的项目模板,安装方法可参考我这一篇文章:Bootstrap Blazor 使用模板创建项目 - 一事冇诚 - 博客园 (cnblogs.com)

Bootstrap Blazor 模板使用Layout 组件

  模板项目默认启用 Tab 多标签模式,你可以在 MainLayout.razor 中将 UseTabSet 设置成 false 关闭该模式,页面其实使用的是 Layout 组件,所以可以自己根据需求,随意开启或关闭一些功能,非常的方便;

Bootstrap Blazor 模板使用Layout 组件

  很多小伙伴都很喜欢默认的 多标签 模式,这满足了很多需要频繁切换页面的需求,毕竟切换一下,页面就重载了谁都受不了;而使用过程中,就有小伙伴有疑问了,我能不能根据以下需要,动态去改变标签的名字呢,如一些报表,需要我在创建的时候先输入名称,创建后我希望在 标签 中显示我刚刚填写的名称,需要怎么做呢?

  所以我们的组件就兼容了这样的场景,使用联级传参的方法,你就可以轻松的做到。

[CascadingParameter]
[NotNull]private TabItem? TabItem {get;set; }privatevoid ChangeText()
{
     TabItem.SetText("新的名字");
}

  借此,简单介绍一下我们的 Layout 组件

Layout

  用于布局的容器组件,方便快速搭建页面的基本结构:

   Container:外层容器。当子元素中包含Header 或Footer 时,全部子元素会垂直上下排列,否则会水平左右排列。

   Header:顶栏容器
   Side:侧边栏容器
   Main:主要区域容器
   Footer:底栏容器

组件概述

  Layout:布局容器,其下可嵌套HeaderSiderMainFooter 或Layout 本身,可以放在任何父容器中
  Header:顶部布局,自带默认样式,其下可嵌套任何元素
  Sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素
  Main:内容部分,自带默认样式,其下可嵌套任何元素
  Footer:底部布局,自带默认样式,其下可嵌套任何元素

上中下布局

Bootstrap Blazor 模板使用Layout 组件

中部左右结构布局

Bootstrap Blazor 模板使用Layout 组件

 左右结构

Bootstrap Blazor 模板使用Layout 组件

  通过设置SideWidth 属性控制侧边栏宽度,支持百分比写法,设置0 时关闭设置宽度功能,采用内部子控件撑满宽度特性

Bootstrap Blazor 模板使用Layout 组件

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?

更多详情,请移步至逛网:传送门......

  • 作者:一事冇诚
  • 原文链接:https://www.cnblogs.com/ysmc/p/16197223.html
    更新时间:2022年5月13日07:56:28 ,共 1729 字。