自由容器

1. 组件概述

自由容器是一个高级布局组件，它允许内部的子元素通过绝对定位的方式自由放置在容器内的任意位置。与普通容器按顺序排列子元素不同，自由容器中的子元素可以通过拖拽来调整位置和大小，实现更灵活的页面布局。这种布局方式特别适合需要精确控制元素位置的场景，如仪表盘、数据可视化大屏、海报设计等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：学习数据仪表盘。在学习辅导类应用中，需要在一个页面上同时展示学习进度、答题正确率、学习时长等多个数据卡片。使用自由容器可以将这些卡片自由摆放在页面的不同位置，形成美观的仪表盘布局，让学生一目了然地看到自己的学习情况。
• 场景二：知识地图展示。在历史情景模拟或文化探索类应用中，需要在一张背景图上标注多个知识点或事件节点。使用自由容器作为底层，设置背景图片，然后将各个知识点组件自由放置在对应的位置上，形成交互式的知识地图。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
边距	设置容器的内边距和外边距。内边距控制容器内容与边框之间的距离，外边距控制容器与周围其他元素之间的距离。可以分别设置上、右、下、左四个方向的数值。
边框	设置容器的边框样式，包括边框的粗细、颜色、样式（实线、虚线等）以及圆角。可以为四条边分别设置不同的样式，也可以统一设置。
背景	设置容器的背景。支持纯色背景、渐变色背景，也可以上传图片作为背景。适合为自由容器设置底图，如地图、海报背景等。
高度设置	选择容器高度的计算方式。“固定”表示使用指定的固定高度值；“适配”表示高度根据内容自动调整。自由容器通常需要设置固定高度，以便子元素能够在确定的区域内定位。
高度	当高度设置为”固定”时显示。输入具体的高度数值，支持多种单位（如 px、%、vh 等）。
最大高度	当高度设置为”适配”时显示。限制容器的最大高度，防止内容过多时容器无限增高。
最小高度	当高度设置为”适配”时显示。设置容器的最小高度，确保即使内容较少时容器也能保持一定的高度。自由容器默认最小高度为 200px。
宽度设置	选择容器宽度的计算方式。“固定”表示使用指定的固定宽度值；“适配”表示宽度根据父容器自动调整。
宽度	当宽度设置为”固定”时显示。输入具体的宽度数值，支持多种单位。
最大宽度	当宽度设置为”适配”时显示。限制容器的最大宽度。
最小宽度	当宽度设置为”适配”时显示。设置容器的最小宽度。
水平内容超出	设置当子元素超出容器水平边界时的处理方式。“超出显示”表示超出部分仍然显示；“超出隐藏”表示超出部分被裁剪不显示；“水平滚动”表示显示水平滚动条；“自动适配”表示仅在需要时显示滚动条。
垂直内容超出	设置当子元素超出容器垂直边界时的处理方式。选项与水平内容超出相同。对于自由容器，如果子元素可能超出容器范围，建议设置为”超出隐藏”或”自动适配”。

事件折叠组

配置项	说明
添加事件	支持”点击”、“鼠标移入”、“鼠标移出”三种触发事件。例如，可以在点击自由容器时触发工作流，实现点击背景区域的交互效果；或者在鼠标移入时显示提示信息。

高级

配置折叠组

配置项	说明
显示层级	设置容器的堆叠顺序（z-index）。数值越大，元素越靠上显示。当多个元素重叠时，层级高的元素会覆盖层级低的元素。仅在定位模式不是”默认”时生效。
定位模式	设置容器的定位方式。“默认(static)“表示正常文档流定位；“相对原位置定位(relative)“表示相对于自身原本位置进行偏移；“视窗中悬浮(fixed)“表示相对于浏览器窗口固定位置，不随页面滚动；“绝对定位(absolute)“表示相对于最近的已定位父元素进行定位。
参考位置	当定位模式为”视窗中悬浮”或”绝对定位”时显示。设置定位的参考角，可选左上角、右上角、右下角、左下角。例如选择”右下角”，则容器会以右下角为基准进行定位。
布局位置	当定位模式不是”默认”时显示。精确设置容器相对于参考位置的偏移量，可分别设置上（top）、右（right）、下（bottom）、左（left）四个方向的距离。
滚动吸附	开启后，当页面滚动到容器位置时，容器会自动吸附在页面的顶部或底部。适用于需要在滚动时保持可见的导航栏或工具栏。仅在定位模式为”默认”或”相对”时可用。
吸附位置	当开启滚动吸附后显示。设置吸附的位置，可选”吸顶”（滚动时固定在页面顶部）、“吸底”（滚动时固定在页面底部）或”自动”（根据滚动方向自动选择）。

状态折叠组

配置项	说明
可见	控制容器是否显示。可以设置为始终可见，或绑定变量实现动态控制。
隐藏	控制容器是否隐藏，与”可见”相反。
禁用	控制容器是否禁用。禁用后容器内的交互元素将不可操作。