页面树结构

版本比较

标识

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


目录

背景

说明

设置组件的背景,支持颜色和图片两种方式。

效果

1、颜色效果

颜色包括纯色和渐变色两种效果:

详细说明如下:

颜色样式

说明

展示效果

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

Image Modified

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

Image Modified

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

Image Modified

渐变各设置项说明如下:

设置项

说明

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

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

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

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

Image Modified

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

2、图片效果

图片背景的拉伸方式支持:适应、平铺、拉伸、填充。其详情请参见 图片-拉伸 内容。

取消图片背景,把“背景”的开关关闭即可。

边框

说明

设置组件边框,支持线条边框和图片边框。

设置组件边框,支持设置线条边框、图片边框、圆角角度。

效果

1、线条边框效果:设置线条类型、大小及颜色。

Image Removed

2、图片边框效果:上传图片,设置拉伸方式及边框高度,其中拉伸类型详情请参见 

1、线型边框效果:设置线条类型、大小及颜色。

Image Added

2、图片边框效果:

①选择内置图片素材

Image Added

②上传图片,设置拉伸方式及边框固定区域参数。

Image Added

设置项说明

Image Added拉伸类型

拉伸类型详情请参见 图片-拉伸

Image Removed

图片边框高度设置从左至右依次是:上边框高度、下边框高度、左边框高度,右边框高度,将鼠标停留有信息提示:

Image Removed

Image Added边框编辑

点击进入边框编辑界面,设置边框固定区域的参数。

边框编辑界面:

Image Added

设置项说明
参数值输入四个方位(上下左右)的边框高度值,确定边框图片固定不变的区域。
参数线拖拽的方式,设置四个方位(上下左右)的边框高度值,确定边框图片固定不变的区域。


3、圆角效果:设置组件边框的圆角角度。设置项包含组件4个角的圆角效果设置项,设置后可以实时查看效果。

Image Added

设置项包含锁定按钮,默认为“锁定”状态,此时该图标高亮,代表4个角的圆角效果统一,无论设置哪一个角的圆角数值,其余三个角的数值会跟随保持一致。

Image Added

点击锁定按钮,可解锁“锁定”状态,此时该图标置灰,代表4个角的圆角效果需单独设置。

Image Added

可以切换设置方式为百分比或绝对像素。

Image Added

字体

说明

设置图形中的标签字体,包含大小、颜色等。

效果


标题

说明

设置标题的可见与否、背景色、标题区域高度、字体、字号等。

效果

双击组件的标题也可修改标题的名字。

示例

通过富文本组件可实现将图表中的值传递到标题的效果。

操作步骤

1、新建一个自助仪表盘,将图表组件拖入画布区并设置字段,如图:1、新建一个仪表盘,将图表组件拖入画布区并设置字段,如图:

设置图表组件的标题如下:

2、将图形组件拖入画布区并设置字段,如图:

3、将文本组件拖入画布区,双击编辑文本组件,在工具栏中点击“添加字段”,选择图表1的“产品类别”字段。

并在后面添加文字“价格情况”。

4、右键设置这三个组件为“浮动”。

5、调整组件的位置如图:


工具栏

说明

设置浏览状态下,鼠标移到组件是否显示工具栏。

效果

如果设置隐藏浏览工具栏,鼠标移到组件上不显示工具栏。

位置

对组件内容的位置进行设置,包括:居上、居中;

...