Layout组件
其实HeyUI组件库已经发布一年半了,而我一直都没有补充Layout组件。
至于一直不开发的原因,主要是因为我觉得系统的布局都会因为定制化而发生变化,也会跟随着设计的变化而变化,而Layout固定的组合方式无法满足实际的需求。
其实,我发现,有很多人的想法和我一模一样,觉得layout的整体实用性不高。
而开始写Layout的原因有两个:
一是随着heyui-admin的架构在不断的成熟,layout这一块一直都是使用自己写的css控制的,改到menu折叠的时候,就觉得实例的代码有点多了,参考了一下ant-design的设置,觉得可以考虑把Layout结合进来。
二是由于很多后端开发的小伙伴的实际需求比较迫切,对于他们来说,系统布局不需要可扩展,他们需要一个简单的框架,直接搭建起来。
话不多说,先把效果图发出来:
上中下布局
上左右布局
左上下布局
具体文档,请戳至下面的链接查看:
Layout开发心理路程
哎~ 好像还挺简单
哎~ 我靠~ 这么方便
哎~ 固定header控制好便捷
哎~ 全局定义变量~ 我靠~ 好爽 😱
~ 真香 😂😂😂😂😂
Layout组件在开发出来的时候,我发现,其实真的很实用,能覆盖日常系统布局大部分场景,而且比自己开发还要快速,好调整。
Layout组件说明
全局变量定义
组件在var.less
中配置三个尺寸,分别为:
@layout-header-height
: 布局中Header的高度,默认值为: 64px@layout-sider-width
: 布局中Sider的宽度,默认值为: 200px@layout-sider-collapse-width
: 布局中Sider收起的宽度,默认值为: 70px
你可以通过修改这三个参数达到设计师对系统布局的要求
组件
Layout总共包含5个组件:
- Layout
- Sider
- HHeader: 为了防止和一些系统定义的Header组件冲突
- HFooter: 为了防止和一些系统定义的Footer组件冲突
- Content
以下图的代码为例:
<Layout>
<Sider>Sider</Sider>
<Layout>
<HHeader>Header</HHeader>
<Content>Content</Content>
<HFooter>Footer</HFooter>
</Layout>
</Layout>
最终排版效果如下图所示:
Layout参数
Layout组件提供以下三种参数:
- headerFixed: 是否固定头部
- siderFixed: 是否固定侧边栏
- siderCollapsed: 是否收起侧边栏
在不同的排版方式中,都能很好的完成页面布局的处理。
应用
目前Layout已经在hey-admin项目中应用了,大家可以通过链接直接访问线上demo:
关于Hey-Admin
HeyUI组件库的admin框架正在开发中,希望大家多多关注。
关于HeyUI
希望更多的人能参与到我们的开源项目中。
请感兴趣的朋友添加微信号:heyui-robot
我们会定期拉人入群。
Github仓库:heyui/heyui