页面树结构

版本比较

标识

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

概述

用于设计仪表盘的样式。包含三部分内容:背景、边距、间距。

功能入口

在自助仪表盘的编辑界面,左侧页签中切换 主题 页签,显示“页面”各设置项,选择 仪表盘。

Image Removed

背景

1、背景提供六种颜色供选择,也可以点击最后一个矩形设置其他颜色。

Image Removed

设置背景为蓝色 ,页面背景为蓝色,组件1和组件2背景不受影响,如下图:

Image Removed

2、背景为“图片”,提供六张图片供选择,也可上传图片,不过一次只能上传一个文件。选择“默认”时,设置图片背景的拉伸方式,有“适应,平铺,拉伸,填充”四种方式;选择“滚动”时,设置图片背景的拉伸方式,有“true、适应,平铺,拉伸,填充”四种方式。

Image RemovedImage Removed

设置背景为 图片 ,页面背景为上传的图片,组件1和组件2背景不受影响,如下图:

Image Removed

说明

1、若要重新上传图片,可以双击图片重新上传。

Image Removed

2、拉伸方式对比说明:

拉伸方式效果图对比说明
适应Image Removed图片等比缩放,图片的最大边放大到页面最小边时就不再放大,即保持图片比例的同时最大化显示图片。
平铺Image Removed若图片大小小于页面,则图片挨个排列,直到排满整个页面。
拉伸Image Removed图片不按比例缩放,根据屏幕显示分辨率拉伸。图片占满整个页面。
填充Image Removed图片等比缩放,按照图片的最小边来适应页面的最大边以达到填充页面效果。如果图片分辨率和屏幕的比例不一样的话,图片会有部分显示不了(超出屏幕之外)。

边距

效果图:

Image Removed

模型图:

Image Removed

间隔

设置组件的间隔大小

设置图片
设置间隔为2Image Removed
设置间隔为35Image Removed
面板
borderColor#BBBBBB
bgColor#F0F0F0
borderWidth1
borderStylesolid
toc

用于设计仪表盘的样式。包含三部分内容:背景、边距、间距。

背景

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

颜色

提供六种颜色供选择,也支持自定义颜色。

Image Added


面板
borderColor#BBBBBB
bgColor#F0F0F0
borderWidth1
borderStylesolid

目录


设置背景颜色效果如图:

颜色为“蓝色”颜色为“灰色”
Image AddedImage Added

图片

提供六张图片供选择,也支持上传图片。

Image Added

上传图片的说明:

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

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

Image Added

3、支持上传图片的格式:.jpg、.jpeg、.png、.gif(V9.5版本还支持.bmp格式,包括升级上来的.bmp格式的背景图也能正常使用

设置背景图片效果如图:

Image Added

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

拉伸方式对比说明:

拉伸方式效果

适应

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

Image Added

平铺

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

Image Added

拉伸

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

Image Added

填充


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

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

Image Added

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

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

边距

设置页面与组件上下左右的边距大小。

Image Added

效果如图:

Image Added

对应的模型图如下:

Image Added

间隔

设置组件与组件的距离,默认值为2px。

Image Added

效果如图:

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

Image Added