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...