历史版本2 :绝对画布 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

「绝对画布」组件的应用场景非常广泛,可实现复杂布局实现,其灵活性和多功能性使得它成为数据可视化和布局设计中的重要工具。

1.2 功能介绍

「绝对画布」组件相当于一块空白的画布,将其他组件拖入绝对画布中,超出绝对画布部分可实现滚动预览。效果如下图所示:

ScreenRecorderProject5.gif

2. 操作步骤编辑

2.1 添加绝对画布

1)点击「创建>仪表板」,创建一张新仪表板。如下图所示:

Group 60.png

2)点击组件区「其他>绝对画布」,将组件添加到画布中。如下图所示:

Group 70.png

2.2 组件移入/移出绝对画布

2.2.1 组件移入画布

1)直接拖拽分析表中制作好的图表或本页面中其他组件/组合到绝对画布上方,出现提示「释放进入绝对画布」,松开鼠标,即可将其拖入绝对画布。如下图所示:

注:不支持再拖入另外的绝对画布,或包含绝对画布的 Tab组件/组合。

ScreenRecorderProject6.gif

2)组件移入画布规则如下:

  • 拖入组件时,组件大小不变。

  • 组件位置若超出绝对画布左/上边界,则组件拖入后自动对齐左/上边界;其余位置则以组件释放位置为准,支持超出绝对画布右/下边界。

  • 若组件超出绝对画布右/下边界,选中绝对画布或绝对画布内的组件,出现横向/纵向滚动条(预览时悬浮绝对画布出现),可滚动查看。

2.2.2 组件移除画布

组件移出绝对画布包括以下两种方式:

  • 直接拖拽绝对画布内组件到绝对画布外,出现提示「释放移出绝对画布」,松开鼠标,即可将其移出绝对画布。此时移出的组件位置以释放位置为准。

  • 在绝对画布列表,悬浮组件,点击「更多>移出」即可将组件移出绝对画布。此时移出的组件默认显示在绝对画布右侧。

如下图所示:

ScreenRecorderProject8.gif

2.3 绝对画布列表

1)绝对画布列表中,默认展示当前绝对画布的名称。支持隐藏、重命名、删除和锁定功能。如下图所示:

Group 72.png

2)绝对画布列表支持改变图表顺序,有两种方式:

  • 在右侧「绝对画布列表」中,拖拽改变图表顺序;

  • 在分页中,选中组件右击,通过「调整层级」按钮改变图表顺序。

Group 74.png

3)绝对画布内的组件,可设置组件的内容、交互、组件样式等属性。如下图所示:

Group 75.png

2.4 调整锁定

绝对画布支持「调整锁定」操作,用户可设置调整绝对画布大小时,内部组件是否跟随变化。 

Group 77.png

未勾选「启用调整锁定」时,调整绝对画布大小,内部组件大小不变。勾选「启用调整锁定」时,调整绝对画布大小,内部组件大小随之等比例变化。效果如下图所示:

ScreenRecorderProject10.gif

2.5 预览置顶

仪表板支持勾选「预览时置顶显示」设置预览置顶。如下图所示:

注 1:若有多个绝对画布设置了预览置顶,预览滚动时,则依次置顶,即同时只会有一个预览置顶生效。 

注 2:对含有网页框组件及处于 Tab组件 内的绝对画布不生效。

Group 76.png

对一个绝对画布设置预览置顶后,预览模板时,该组件滚动到顶后会置顶显示。效果如下图所示:

ScreenRecorderProject14.gif

2.6 移动端布局

支持对绝对画布单独设置移动端布局效果,开启重布局后,可设置组件间隙。如下图所示:

Group 66.png

效果如下图所示:

Group 78.png