页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。


目录


信息

该设置项用于设计仪表盘的样式,包含背景、边距和间距。

背景

仪表盘背景设置,分为“颜色”和“图片”两种。

(1)颜色

颜色

  • 默认颜色

默认提供了7种颜色可选择

设置背景颜色效果如图:

颜色为“蓝色”颜色为“灰色”
Image Removed

Image Added

Image Removed

Image Added

  • 自定义颜色

若默认颜色未能满足您的需求,可进行颜色自定义:

自定义颜色示例如下所示:

颜色样式

说明

展示效果

纯色即纯色,如:红、蓝、粉等

Image Modified

单色渐变同一色系的渐变,如淡蓝到深蓝

Image Modified

多色渐变两种及以上的色系进行渐变

Image Modified

渐变色各设置项说明如下:

设置项

说明

渐变色类型分为线性渐变和径性渐变
渐变方向

当为线性渐变时,渐变方向有从上到下、从下到上、从左到右、从右到左

当为径性渐变时,渐变方向有居中、左上、右上、左下、右下

渐变颜色点击+ / -号增删色标,或点击色条上的空白位置增加色标,选中色标后,可以调整色标颜色和色标位置
Image Removed

Image Added

色标,通过色标设置渐变颜色
色标颜色调整色标的颜色
色标位置以百分比的形式调整色标所处的位置
(2)图片

图片

提供六张图片供选择,也支持上传图片。提供六张图片供选择,也支持上传图片,仅支持上传小于或等于300KB的文件。

上传图片的说明:

1、一次只能上传一个文件,双击上传图片框可重新上传。

2、当上传的图片大小超过300KB时,弹出如下“提示”框,选择压缩或不压缩图片。

3、支持上传png、jpg、jpeg、svg、gif等各种格式的图片。

设置背景图片效果如图:

对上传的图片支持设置拉伸方式和是否随滚动条滚动。

拉伸方式对比说明:

拉伸方式效果

适应

图片等比缩放,图片的最大边放到页面最小边时就不再放大,即保持图片比例的同时最大化显示图片。

Image Modified

平铺

若图片大小小于页面,则图片挨个排列,直到排满整个页面。

Image Modified

拉伸

图片不按比例缩放,根据屏幕显示分辨率拉伸。图片占满整个页面。

Image Modified

填充


图片等比缩放,按照图片的最小边来适应页面的最大边已达到填充页面效果。

如果图片分辨率和屏幕的比例不一样的话,图片会有部分显示不了(超出屏幕之外)。

Image Modified

是否随滚动条滚动说明如下:

  • 默认:背景图不随滚动条滚动。
  • 滚动:背景图随滚动条滚动。

边距

当布局方式为“高宽自适应”和“宽度自适应”时,可设置页面与组件上下左右的边距大小。

效果如图:

Image RemovedImage Added

对应的模型图如下:

间隔

当布局方式为“高宽自适应”和“宽度自适应”时,可设置组件与组件的距离,默认值为2px。效果如图:

设置组件的间距为40px,效果如图:

Image RemovedImage Added