Layout 布局

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

Container:外层容器。当子元素中包含 HeaderFooter 时,全部子元素会垂直上下排列,否则会水平左右排列。
Header:顶栏容器
Side:侧边栏容器
Main:主要区域容器
Footer:底栏容器

组件概述

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

常见页面布局

上中下布局

常见于互联网网站布局

Demo
Header
Main

中部左右结构布局

中部采用左右结构,多用于后台管理网站布局,当布局模板中增加 Side 组件时默认采用上中下,中部采用左右结构布局

Demo
Header
Main

左右结构

右侧采用上中下结构,多用于后台管理网站布局,通过设置 IsFullSide 属性值来控制布局为左右结构

Demo
Header
Main

自定义侧边栏宽度支持百分比

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

Demo
Header
Main

实战应用

Demo
实际使用过程中,侧边栏一般有两种用法
  • 侧边栏充满整个屏幕,当菜单总体高度超出屏幕后出现滚动条
  • 侧边栏不做处理高度由内容自动撑开
由于存在多种运用方式,所以本组件未进行封装,由自己决定如何进行布局,下面是实际运用中的实战示例

为了方便大家学习与比较以下实战示例中尽量使用 style 内联样式

本例点击左侧菜单展开后出现滚动条

本例点击左侧菜单展开后不出现滚动条会撑开父容器高度

Layout 组件与 Tab 组件配合使用实战示例请参阅 Tab 组件

整页面级别的组件

Demo

Attributes 属性

Loading...
An error has occurred. This application may no longer respond until reloaded. Reload