吸附容器

1. 组件概述

吸附容器是一个高级布局组件，用于创建固定在页面特定位置的内容区域。它可以将内容”吸附”在页面的顶部或底部，无论用户如何滚动页面，吸附容器始终保持在设定的位置。这种布局方式常用于需要始终可见的导航栏、工具栏、操作按钮等场景。吸附容器内部采用弹性布局，可以放置多个子元素并灵活控制它们的排列方式。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：固定顶部导航栏。在 AI 问答应用中，将应用标题、功能切换按钮等放在吸附容器中并设置为”吸顶”，用户在浏览长对话内容时，顶部导航始终可见，方便随时切换功能或返回首页。
• 场景二：固定底部操作栏。在答题练习应用中，将”提交答案”、“下一题”等操作按钮放在吸附容器中并设置为”吸底”，无论题目内容多长，用户都能快速找到操作按钮，提升使用体验。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
快捷版式设置	快速设置容器内各列的宽度比例。点击预设的比例按钮（如 1:1、1:2:1 等）可快速调整内部列的分布。也可以手动输入比例值，用冒号分隔（如 1:2:3 表示三列按 1:2:3 的比例分配宽度）。
下方插入新行 / 上方插入新行	快捷操作按钮，点击可在当前容器的下方或上方插入一个新的布局容器，方便快速构建多行布局结构。
内边距和外边距	设置容器的内边距（内容与边框的距离）和外边距（容器与周围元素的距离）。可以分别设置上、右、下、左四个方向的数值。
边框	设置容器的边框样式，包括边框宽度、颜色、圆角等。可以为四个方向分别设置不同的边框效果。
背景	设置容器的背景，支持纯色、渐变色或背景图片。可以让吸附容器在视觉上更加突出，与页面其他内容区分开。
内部对齐设置	控制容器内子元素的排列方式。包括排列方向（水平或垂直）、水平对齐方式（靠左、居中、靠右、均匀分布等）、垂直对齐方式（顶部、居中、底部等）。
行间隔	当内部元素垂直排列时，设置各元素之间的垂直间距。
列间隔	当内部元素水平排列时，设置各元素之间的水平间距。
高度设置	选择容器高度模式：固定（指定具体高度值）或适配（根据内容自动调整）。选择”固定”后会出现高度输入框。
高度	当高度设置为”固定”时显示，用于输入具体的高度数值，支持 px、%、vh 等单位。
最大高度	当高度设置为”适配”时显示，限制容器的最大高度，防止内容过多时容器无限扩展。
最小高度	当高度设置为”适配”时显示，确保容器至少有一定的高度，即使内容很少也不会过于扁平。
宽度设置	选择容器宽度模式：固定（指定具体宽度值）或适配（默认占满可用宽度）。选择”固定”后会出现宽度输入框。
宽度	当宽度设置为”固定”时显示，用于输入具体的宽度数值。
最大宽度	当宽度设置为”适配”时显示，限制容器的最大宽度。
最小宽度	当宽度设置为”适配”时显示，确保容器至少有一定的宽度。
对齐方式	当设置了固定宽度或最大宽度时显示。控制容器在页面中的水平位置：靠左、居中或靠右。吸顶或吸底的容器通常设置为居中或占满宽度。

高级

配置折叠组

配置项	说明
如何换行	控制内部子元素超出容器宽度时的换行行为。可选：不换行（默认，超出部分可能被截断或产生滚动）、自动换行（超出时自动换到下一行）、自动换行（颠倒）（换行后新行在上方）。
水平内容超出	设置当内容宽度超出容器时的处理方式。可选：超出显示（内容溢出可见）、超出隐藏（溢出部分不可见）、水平滚动（出现水平滚动条）、自动适配（需要时才出现滚动条）。
垂直内容超出	设置当内容高度超出容器时的处理方式。选项与水平内容超出相同。
显示层级	设置容器的堆叠顺序（z-index）。数值越大，容器越靠前显示。吸附容器默认层级为 10，确保它显示在普通内容之上。如果页面有多个悬浮元素，可以通过调整层级控制它们的前后关系。
吸附位置	吸附容器的核心配置，决定容器固定在页面的哪个位置。可选：吸顶（固定在页面顶部）、吸底（固定在页面底部）。选择后容器会自动调整定位，始终保持在指定位置。

状态折叠组

配置项	说明
可见	控制容器是否显示。默认可见。可以绑定变量实现动态控制，例如根据用户操作显示或隐藏吸附容器。
隐藏	控制容器是否隐藏，与”可见”相反。