格子是Mockplus 3.2新增的功能,可以快速制作重复的布局,提高设计效率。

 

一、创建格子

1. 选中一个或多个组件。

2. 在主工具栏上,点击“转为格子”的图标,此时可以看到格子已经生成(你也可以鼠标右键,“转为格子”)。

3. 拉动格子,格子的内容会自动生成。

repeater_create

二、调整单元格的大小、行距和间距

在格子上,拉动单元格侧边的红线,可以设置单元格的大小;拉动灰线,设置单元格的行距和间距(当然,你也可以在属性面板上直接输入数字,来进行设置)。

 

三、设置属性

在属性面板上,还有一些属性可以设置,比如:你可以给格子设置分隔线,包括其颜色、粗细等。

 

四、脱离

有时候,你需要某个格子保持自己独立的样式,不受整体变动的影响,那么,在当前格子上点击“脱离”。

repeater_separator

 

五、数据自动填充

Mockplus v3.2.4实现了数据的自动填充功能,支持填充的数据类型为文字和图片。目前,自动填充功能适用于以下两种情况:

1. 直接使用,用于图片或文字的单个或批量填充。

2. 在格子中使用,快速构建带有重复布局的组件(如列表),大大节省设计时间。

自动数据填充

快速格子