如何使用占位符组件？

一、什么是占位符组件？

占位符组件是在页面上实现显示一块空白的模块，通过添加一块空白的高度或宽度来占位，实现模块与模块之间有一定高度或宽度的间距，而不是紧贴着连在一起，占位符在制作页面时的应用比较灵活（高度占位用的比较多，宽度占位用的比较少）。

 

二、占位符组件的应用场景主要有哪些？

占位符组件的应用很广泛，在制作页面时的应用也比较灵活。

比如：当一行中有多个列，每个列的内容高度不一样时，可以通过添加占位符组件来占位，达到排版上的美观性和一致性。再比如：两行内容（这两行使用两个不同的组件来实现的）之间的距离太近时需要使用占位符组件来占位以便更美观。

同时添加占位符组件，相比在组件中设置组件的上下边距，有一个额外的优势：占位符组件支持在不同设备上（PC端、Pad端、手机端）设置不同的高度，从而达到兼顾PC端、Pad端、手机端等多终端展示的效果。

占位符组件应用效果举例：通过占位符组件使得两部分内容间距变大。

三、如何使用占位符组件？

1、如何添加占位符组件？

在页面上添加组件的方法都是一样的，如何添加占位符组件？方法请参考此图文帮助如何添加组件？

添加的组件名称为“占位符”，如下图所示：

              

2、如何设置占位符在不同设备上的高度？

1）如何调整占位符在PC端的高度？

PC端占位符的高度，可以把鼠标放到占位符的下边缘线上下晃动找到下图所示标志，然后往上或往下拖动即可调整占位符的高度。PC端占位符的最小高度为10px，最大没有做限制。

2）如何设置占位符在PAD、手机端的高度？

第一步：把鼠标放到添加的占位符的位置，在占位符区域左上角会出现组件名称“占位符”，单击第一个按钮即“设置”，弹出“设置占位符 ”窗口；

第二步：在弹出的设置占位符窗口，可以滑动按钮调节占位符高度，也可以直接在后方矩形方框内输入数值来改变占位符高度。支持设置PAD横屏、PAD竖屏、手机横屏、手机竖屏上占位符的高度（高度区间0~100px），以便达到排版美观的效果。设置好之后单击“保存”；

3、如何设置占位符组件的背景颜色或背景图片？

通过占位符组件的编辑样式功能，可以给占位符组件设置背景颜色或设置背景图片，操作入口如下图所示：

第1步：把鼠标放到添加的占位符的位置，在占位符区域左上角会出现组件名称“占位符”，单击第二个按钮即“编辑样式”；

第二步：在“组件全局”页签下，单击“组件背景”--》自定义--》单击下拉小箭头设置需要的颜色，然后保存；
 

 

或：在“组件全局”页签下，单击“组件背景”--》自定义--》自定义，在图片下上传背景图片，然后选择平铺方式、平铺位置、背景尺寸，然后保存；