“真相定律”之Layout组件

2,885 阅读3分钟

Layout组件

其实HeyUI组件库已经发布一年半了,而我一直都没有补充Layout组件。

至于一直不开发的原因,主要是因为我觉得系统的布局都会因为定制化而发生变化,也会跟随着设计的变化而变化,而Layout固定的组合方式无法满足实际的需求。

其实,我发现,有很多人的想法和我一模一样,觉得layout的整体实用性不高。

而开始写Layout的原因有两个:

一是随着heyui-admin的架构在不断的成熟,layout这一块一直都是使用自己写的css控制的,改到menu折叠的时候,就觉得实例的代码有点多了,参考了一下ant-design的设置,觉得可以考虑把Layout结合进来。

二是由于很多后端开发的小伙伴的实际需求比较迫切,对于他们来说,系统布局不需要可扩展,他们需要一个简单的框架,直接搭建起来。

话不多说,先把效果图发出来:

上中下布局

上左右布局

左上下布局

具体文档,请戳至下面的链接查看:

戳我去:HeyUI-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:

admin.heyui.top/

关于Hey-Admin

HeyUI组件库的admin框架正在开发中,希望大家多多关注。

github.com/heyui/heyui…

关于HeyUI

希望更多的人能参与到我们的开源项目中。

请感兴趣的朋友添加微信号:heyui-robot

我们会定期拉人入群。

官网: HEYUI,一个基于Vue.js的高质量UI组件库

Github仓库:heyui/heyui