
Layout 布局
用于布局的容器组件,方便快速搭建页面的基本结构:
Container
:外层容器。当子元素中包含 Header
或 Footer
时,全部子元素会垂直上下排列,否则会水平左右排列。
Header
:顶栏容器
Side
:侧边栏容器
Main
:主要区域容器
Footer
:底栏容器
组件概述
Layout
:布局容器,其下可嵌套 Header
Sider
Main
Footer
或 Layout
本身,可以放在任何父容器中
Header
:顶部布局,自带默认样式,其下可嵌套任何元素
Sider
:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素
Main
:内容部分,自带默认样式,其下可嵌套任何元素
Footer
:底部布局,自带默认样式,其下可嵌套任何元素
常见页面布局
上中下布局
常见于互联网网站布局
Demo
Header
Main
中部左右结构布局
中部采用左右结构,多用于后台管理网站布局,当布局模板中增加 Side
组件时默认采用上中下,中部采用左右结构布局
Demo
Header
左右结构
右侧采用上中下结构,多用于后台管理网站布局,通过设置 IsFullSide
属性值来控制布局为左右结构
Demo
自定义侧边栏宽度支持百分比
通过设置 SideWidth
属性控制侧边栏宽度,支持百分比写法,设置 0
时关闭设置宽度功能,采用内部子控件撑满宽度特性
Demo
Header
实战应用
Demo
实际使用过程中,侧边栏一般有两种用法
- 侧边栏充满整个屏幕,当菜单总体高度超出屏幕后出现滚动条
- 侧边栏不做处理高度由内容自动撑开
由于存在多种运用方式,所以本组件未进行封装,由自己决定如何进行布局,下面是实际运用中的实战示例
为了方便大家学习与比较以下实战示例中尽量使用 style
内联样式
本例点击左侧菜单展开后出现滚动条
Header
本例点击左侧菜单展开后不出现滚动条会撑开父容器高度
Header
Layout
组件与 Tab
组件配合使用实战示例请参阅 Tab 组件
整页面级别的组件
Demo
Attributes
Loading...
@page "/layouts"
<h3>Layout 布局</h3>
<h4>用于布局的容器组件,方便快速搭建页面的基本结构:</h4>
<p>
<code>Container</code>:外层容器。当子元素中包含 <code>Header</code> 或 <code>Footer</code> 时,全部子元素会垂直上下排列,否则会水平左右排列。<br />
<code>Header</code>:顶栏容器<br />
<code>Side</code>:侧边栏容器<br />
<code>Main</code>:主要区域容器<br />
<code>Footer</code>:底栏容器
</p>
<h4>组件概述</h4>
<p>
<code>Layout</code>:布局容器,其下可嵌套 <code>Header</code> <code>Sider</code> <code>Main</code> <code>Footer</code> 或 <code>Layout</code> 本身,可以放在任何父容器中<br />
<code>Header</code>:顶部布局,自带默认样式,其下可嵌套任何元素<br />
<code>Sider</code>:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素<br />
<code>Main</code>:内容部分,自带默认样式,其下可嵌套任何元素<br />
<code>Footer</code>:底部布局,自带默认样式,其下可嵌套任何元素
</p>
<Tips>
<p>
以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外,<code>Layout</code> 的子元素只能是后四者,后四者的父元素也只能是 <code>Layout</code>
</p>
<b>注意事项</b>
<p>为了方便大家利用这套组件快速搭建项目,作者制作了 <b>项目模板(<code>Project Templates</code>)</b>,使用 <code>dotnet new</code> 命令行,与 <code>Bootstrap Blazor App Extension 扩展插件</code> 通过 <code>Visual Studio 2019</code> 新建项目创建,具体使用方法与步骤请点击 <a href="template" target="_blank">传送门</a></p>
</Tips>
<h4>常见页面布局</h4>
<Block Title="上中下布局" Introduction="常见于互联网网站布局">
<Layout ShowFooter="true">
<Header>
<div class="text-center header">Header</div>
</Header>
<Main>
<div class="text-center main">Main</div>
</Main>
<Footer>
<div class="text-center footer">Footer</div>
</Footer>
</Layout>
</Block>
<Block Title="中部左右结构布局" Introduction="中部采用左右结构,多用于后台管理网站布局,当布局模板中增加 <code>Side</code> 组件时默认采用上中下,中部采用左右结构布局">
<Layout ShowFooter="true">
<Header>
<div class="text-center header">Header</div>
</Header>
<Side>
<div class="text-center side">Side</div>
</Side>
<Main>
<div class="text-center main">Main</div>
</Main>
<Footer>
<div class="text-center footer">Footer</div>
</Footer>
</Layout>
</Block>
<Block Title="左右结构" Introduction="右侧采用上中下结构,多用于后台管理网站布局,通过设置 <code>IsFullSide</code> 属性值来控制布局为左右结构">
<Layout ShowFooter="true" IsFullSide="true">
<Header>
<div class="text-center header">Header</div>
</Header>
<Side>
<div class="text-center side">Side</div>
</Side>
<Main>
<div class="text-center main">Main</div>
</Main>
<Footer>
<div class="text-center footer">Footer</div>
</Footer>
</Layout>
</Block>
<Block Title="自定义侧边栏宽度支持百分比" Introduction="通过设置 <code>SideWidth</code> 属性控制侧边栏宽度,支持百分比写法,设置 <code>0</code> 时关闭设置宽度功能,采用内部子控件撑满宽度特性">
<Layout ShowFooter="true" SideWidth="200">
<Header>
<div class="text-center header">Header</div>
</Header>
<Side>
<div class="text-center side">Side</div>
</Side>
<Main>
<div class="text-center main">Main</div>
</Main>
<Footer>
<div class="text-center footer">Footer</div>
</Footer>
</Layout>
</Block>
<Block Title="实战应用" Introduction="">
<div>实际使用过程中,侧边栏一般有两种用法</div>
<ul class="mt-2">
<li>
<div>侧边栏充满整个屏幕,当菜单总体高度超出屏幕后出现滚动条</div>
</li>
<li>
<div>侧边栏不做处理高度由内容自动撑开</div>
</li>
</ul>
<div>由于存在多种运用方式,所以本组件未进行封装,由自己决定如何进行布局,下面是实际运用中的实战示例</div>
<p>
为了方便大家学习与比较以下实战示例中尽量使用 <code>style</code> 内联样式
</p>
<p>
本例点击左侧菜单展开后出现滚动条
</p>
<Tips>
右侧面板中可用区域默认为全部,适用于带 <code>Tab</code> 组件的布局,本例中为了美观 <code>Main</code> 模板中内置了一个 <code>div</code> 并且设置样式为 <code>style="padding: 1rem;"</code>
</Tips>
<div style="width: 100%; height: 300px; border: 1px solid rgba(0,0,0,.125);">
<Layout ShowFooter="true" SideWidth="160px">
<Header>
<div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
</Header>
<Side>
<div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; overflow: auto; border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
<Menu Items="@GetIconSideMenuItems()" IsVertical="true"></Menu>
</div>
</Side>
<Main>
<div style="padding: 1rem;">Main</div>
</Main>
<Footer>
<div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
</Footer>
</Layout>
</div>
<p class="mt-3">
本例点击左侧菜单展开后不出现滚动条会撑开父容器高度
</p>
<div style="width: 100%; border: 1px solid rgba(0,0,0,.125);">
<Layout ShowFooter="true" SideWidth="160px">
<Header>
<div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
</Header>
<Side>
<div style="border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
<Menu Items="@GetIconSideMenuItems()" IsVertical="true"></Menu>
</div>
</Side>
<Main>
<div style="padding: 1rem;">Main</div>
</Main>
<Footer>
<div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
</Footer>
</Layout>
</div>
<p class="mt-3">
<code>Layout</code> 组件与 <code>Tab</code> 组件配合使用实战示例请参阅 <a href="/tabs">Tab 组件</a>
</p>
</Block>
<Block Title="整页面级别的组件" Introduction="">
<Tips>通过设置 <code>IsPage</code> 属性设置 <code>Layout</code> 组件是否掌控正页面级别的布局方式,设置为 <code>true</code> 后,本组件采用整屏布局</Tips>
<ul class="page-layout-demo-list">
<li><a href="layout-page" target="_blank">整页面组件生成器</a></li>
</ul>
</Block>
<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using System.Collections.Generic;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public sealed partial class Layouts
{
private IEnumerable<MenuItem> GetIconSideMenuItems()
{
var ret = new List<MenuItem>
{
new MenuItem() { Text = "系统设置", IsActive = true, Icon = "fa fa-fw fa-gears" },
new MenuItem() { Text = "权限设置", Icon = "fa fa-fw fa-users" },
new MenuItem() { Text = "日志设置", Icon = "fa fa-fw fa-database" }
};
ret[0].AddItem(new MenuItem() { Text = "网站设置", Icon = "fa fa-fw fa-fa" });
ret[0].AddItem(new MenuItem() { Text = "任务设置", Icon = "fa fa-fw fa-tasks" });
ret[1].AddItem(new MenuItem() { Text = "用户设置", Icon = "fa fa-fw fa-user" });
ret[1].AddItem(new MenuItem() { Text = "菜单设置", Icon = "fa fa-fw fa-dashboard" });
ret[1].AddItem(new MenuItem() { Text = "角色设置", Icon = "fa fa-fw fa-sitemap" });
ret[2].AddItem(new MenuItem() { Text = "访问日志", Icon = "fa fa-fw fa-bars" });
ret[2].AddItem(new MenuItem() { Text = "登录日志", Icon = "fa fa-fw fa-user-circle-o" });
ret[2].AddItem(new MenuItem() { Text = "操作日志", Icon = "fa fa-fw fa-edit" });
return ret;
}
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Header",
Description = "页头组件模板",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Side",
Description = "侧边栏组件模板",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "SideWidth",
Description = "侧边栏宽度,支持百分比,设置 0 时关闭宽度功能",
Type = "string",
ValueList = " — ",
DefaultValue = "300px"
},
new AttributeItem() {
Name = "Main",
Description = "内容组件模板",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Footer",
Description = "页脚组件模板",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Menus",
Description = "整页面布局时侧边栏菜单数据集合",
Type = "IEnumerable<MenuItem>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "IsFullSide",
Description = "侧边栏是否占满整个左边",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsPage",
Description = "是否为整页面布局",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsFixedFooter",
Description = "是否固定 Footer 组件",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsDark",
Description = "是否为暗黑模式",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsFixedHeader",
Description = "是否固定 Header 组件",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowCollapseBar",
Description = "是否显示收缩展开 Bar",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowFooter",
Description = "是否显示 Footer 模板",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowGotoTop",
Description = "是否显示返回顶端按钮",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "UseTabSet",
Description = "是否开启多标签模式",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "AdditionalAssemblies",
Description = "额外程序集合,传递给 Tab 组件使用",
Type = "IEnumerable<Assembly>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "OnCollapsed",
Description = "收缩展开回调委托",
Type = "Func<bool, Task>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "OnClickMenu",
Description = "点击菜单项时回调委托",
Type = "Func<bool, MenuItem>",
ValueList = " — ",
DefaultValue = " — "
}
};
}
}