![e8466fdd1145b44ba13ce618d153b615.png](https://i-blog.csdnimg.cn/blog_migrate/df5a9ef6c8ef8d10e7419f1282ed1027.png)
注:因知乎上传gif压缩严重,几乎看不出啥,因此贴上notion链接,查看动图很清晰哦。
https://www.notion.so/a3bb6564aa1a4bc99e3022e5c003c13dwww.notion.so哈喽啊,大家好啊,采矿工又来了!这次给大家带来的是一个栅格系统的应用实例分享,不对的地方还请大家指正!<O_O>
介绍实例之前,先讲一个后台系统中常见的组件:查询面板。
关于查询面板的爱恨情仇
查询面板这东西,一般长这样:
![d5534d19ad68f34ca8791831fa2d89ab.png](https://i-blog.csdnimg.cn/blog_migrate/df852fc1c87f849179d222f762c67b45.png)
关于它的设计,真是一言难尽。我大致罗列了以下几种情况:
- 一或两个查询项 + 按钮
- 多个查询项 + 按钮
- 某些查询项长短不一,造成与其他查询项无法对齐,排布混乱
先来讲讲我们UED团队遇到的趣事
首先,我们UED的同学定了规则:查询项居左布置,按钮居右布置。可是针对一至两个查询项的实际效果,老板有意见了:
![42a51d7372692c349fd1c8f3180e7f20.png](https://i-blog.csdnimg.cn/blog_migrate/902ce87ede3f82b51a448e5845147f57.jpeg)
于是,UED同学们将方案改成了如下所示,同时,制定了新规则:查询按钮跟着查询项的屁股后面跑!
![f0be463ef6e245f5452838e09cfe8a70.png](https://i-blog.csdnimg.cn/blog_migrate/6e1883650c36cfdf0c9983f2ba73e356.png)
问题解决!
N天后,老板又来了:你们这查询面板,查询项多少不一的情况下,这按钮的位置不一致,不舒服!你们参考参考其他产品,比如 antdesign,弄个优化方案!
![1077be96ce257e9d344c629dcf01f72c.png](https://i-blog.csdnimg.cn/blog_migrate/5a4b9b8a5b21a600120d22fe06dcdeca.jpeg)
于是,UED队伍动用所有队员力量,经过N次重大会议,制定新的规则如下:
- 单行查询面板,按钮跟着查询项屁股后面跑
- 多行查询面板,按钮固定在最右侧
- 为了美观,按钮独占一列
![dc2e80a31e811af1a1d7c7f4c81c532d.png](https://i-blog.csdnimg.cn/blog_migrate/b4f17257da3d0916e6e014af27e617ff.jpeg)
问题貌似又得到了解决……
某天,另一个老板找上了门:
![3135b812a02a70565503f69c8b117a3b.png](https://i-blog.csdnimg.cn/blog_migrate/9ad34a6e248ba9bb1eb6100c92f45e0b.jpeg)
UED团队陷入沉思之中……
引入栅格系统
老板给我们发工资,得听老板的!于是,我们绞尽脑汁,由某位小弟(me)提出了一个方案:引入栅格系统。
经过慎重考虑,我们引入了24栅格系统,如下所示:
![ddd1ecd87887f30fd0e0559ca742ab1f.png](https://i-blog.csdnimg.cn/blog_migrate/7a4c49f4bacc56f52991bdd90c354272.png)
![403a0035285e5bdb125be525e6067002.png](https://i-blog.csdnimg.cn/blog_migrate/1a734bb45569ab298101a717f966bb55.png)
并做了如下规定:
- 将查询项、按钮都当成一种元素:块
- 每一个块,默认占屏幕宽度 1/3
- 每一个块,可以自由调整所占栅格的格数
- 每个块按照自上而下,自左向右流式布局
- 按钮可以设置居左 / 居右显示
设置界面如下:
![6be7721a9b9bcdd234085578a15cba6d.png](https://i-blog.csdnimg.cn/blog_migrate/5eae9bcbcf306aa6b3d2f339ae3c429d.jpeg)
经过和开发哥哥们多轮PK,我们实现了我们的想法。下面,将详细演示,栅格系统是如何作用于查询面板的:
1、单行查询面板
按钮默认左对齐,同时跟着查询项屁股后面跑
![1706f350aa1be842028f5da32a828c41.gif](https://i-blog.csdnimg.cn/blog_migrate/50d250d6c5a314552baf508d3c39f048.gif)
2、单行变多行
通过调整按钮块元素所占栅格格数,配合对齐方式设置,可实现按钮左右布局效果
![5a8dc3a054149359a728d26e2ffe866d.gif](https://i-blog.csdnimg.cn/blog_migrate/8efd83744b72c55beca6b73019865b03.gif)
![91779432bac2bfc63f4ed0d395fc0acc.gif](https://i-blog.csdnimg.cn/blog_migrate/5c77d436fd1cfc159882d3dbb7b22b9c.gif)
3、调整单个块元素的宽度
支持对单个块元素所占栅格格数调整,实现宽度调整
![3dd3b772a7979dd310a52ba987e1ce9c.gif](https://i-blog.csdnimg.cn/blog_migrate/6304c13e4eea5dc3816a36c322675d15.gif)
4、继续增加查询项
当查询项宽度不一时,通过调节块元素宽度,最大化节省空间
![8010e86c89c4ddfbaa5951119f359d9e.gif](https://i-blog.csdnimg.cn/blog_migrate/814b4f0e0a01eb55f838af82e38c96b4.gif)
5、改变按钮对齐方式
满足老板们不同要求,按钮跟着跑?固定?都行!
![45a3c63cbf81f450e74e1cc79b49223f.gif](https://i-blog.csdnimg.cn/blog_migrate/86206d6229f03fd3c242f4d729e2ad0f.gif)
小伙伴们看明白了么<O_O>。目前,此组件及设置方式已成功应用在我们的一个项目之中。同时,我们也将此查询面板作为一个解决方案,存入了我们的方案库中。
以上就是关于栅格系统的一个应用实例,若有不正确的地方,还请小伙伴们指正!