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

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

很多小伙伴都很喜欢默认的 多标签 模式,这满足了很多需要频繁切换页面的需求,毕竟切换一下,页面就重载了谁都受不了;而使用过程中,就有小伙伴有疑问了,我能不能根据以下需要,动态去改变标签的名字呢,如一些报表,需要我在创建的时候先输入名称,创建后我希望在 标签 中显示我刚刚填写的名称,需要怎么做呢?
所以我们的组件就兼容了这样的场景,使用联级传参的方法,你就可以轻松的做到。
[CascadingParameter] [NotNull]private TabItem? TabItem {get;set; }privatevoid ChangeText() { TabItem.SetText("新的名字"); }
借此,简单介绍一下我们的 Layout 组件
用于布局的容器组件,方便快速搭建页面的基本结构:
Container:外层容器。当子元素中包含Header 或Footer 时,全部子元素会垂直上下排列,否则会水平左右排列。
Header:顶栏容器 Side:侧边栏容器 Main:主要区域容器 Footer:底栏容器
Layout:布局容器,其下可嵌套HeaderSiderMainFooter 或Layout 本身,可以放在任何父容器中 Header:顶部布局,自带默认样式,其下可嵌套任何元素 Sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素 Main:内容部分,自带默认样式,其下可嵌套任何元素 Footer:底部布局,自带默认样式,其下可嵌套任何元素



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

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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? | — | — |
更多详情,请移步至逛网:传送门......