Simon.hu 发表于 2021-1-26 14:35:16

活字格7.0新功能解密:八,流式布局(二) 行高列宽自适应-实战

本帖最后由 Simon.hu 于 2021-1-27 08:52 编辑

相信看了,咱们上一个活字格7.0流式布局的帖子的,很多的同学,已经在欢呼了
http://img.soogif.com/i9vq9c9nYhUtXOaUf8JQbWZsICFqhJMa.jpg_s400x0

我也知道,大家对前2个模式(固定模式和自适应模式)应该比较容易理解,也大致知道的这个功能如果使用;
但是对第三个模式,可能大家会比较晕这个功能到底怎么使用的?功能听起来非常的强大,但是怎么落地呢?
http://img.soogif.com/s2OUbkFdXoRSdIUtyUrdy2H7zpArbRrJ.gif_s400x0

那这个帖子,我就给大家说一下这个第三个模式的使用场景,一起感受一下他的威慑力~~~

抛砖引玉一个场景
还记得很多大佬问过我,能不能在页面变大的时候,只对一个页面只对部分内容拉伸,其他的部分不要拉伸呢?
比如不要对菜单拉伸,只对右侧的内容区域拉伸呢?
这时候这个范围模式就要发挥它的作用了~
我们就拿活字格内置的功能演示模板,作为例子

设置不拉伸和拉伸模式的情况如下:

不拉伸实在不好看,双向拉伸以后,菜单感觉又太占地方了
http://img.soogif.com/X7lIV5QMOqWUFg4dhT7a8x42MYm6dmHy.gif_s400x0
新版本的范围模式可以轻松解决
做法也非常的简单,我来带着大家做一下
首先,这个范围模式也是对一整行或者一整列的,所以我们在设置的时候,需要尽量保证被影响的范围是我们需要的,比如这个模板,我们需要将一列不会影响其他内容,但是又能影响页面占位区的列去设置范围占比是1

这样我们的页面就会在页面占位区扩大了
(为了方便大家查看,我故意给这列的一个格子设置了一个背景颜色)

但是仅仅这样内容(图文列表)区域并没有变大,所以我们还需要将这个内容区域也设置一个范围占比列
为了方便查看,我也做了一个背景色方便我们理解这个功能

这样就是效果

同理,我们给行也设置一个范围占比列


这样我们希望的效果就出来了(菜单不拉伸,内容区域拉伸)


http://img.soogif.com/gUJWhXDDkSS6SLPY91wyXQ79RtWtCYmV.gif_s400x0

页: [1]
查看完整版本: 活字格7.0新功能解密:八,流式布局(二) 行高列宽自适应-实战