容器

1. 组件概述

容器是一个布局组件，用于包裹和组织其他组件。它是构建页面结构的基础单元，可以将多个组件放置在一起形成一个整体。容器提供了丰富的样式控制能力，包括边距、边框、背景色设置，以及弹性布局（Flex）配置，帮助你灵活地排列内部组件。当你需要将一组相关的组件组合在一起，或者需要对某个区域进行统一的样式控制时，就可以使用容器组件。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

场景一：构建 AI 对话界面的输入区域。将文本输入框和发送按钮放入同一个容器中，设置容器为弹性布局、水平排列，让输入框和按钮并排显示。通过调整容器的边距和背景色，使输入区域与页面其他部分形成视觉区分。
场景二：创建知识卡片展示区。在历史情景模拟应用中，将标题文字、图片和描述文字放入容器，设置容器为垂直排列，并添加边框和背景色，形成一个独立的知识卡片。可以设置固定宽度并居中显示，让卡片在页面中更加美观。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
插入行/列按钮	当容器位于 Flex 布局内部时，会显示快捷按钮，可以在当前容器的上方/下方（垂直布局）或左侧/右侧（水平布局）快速插入新的容器。
边距	设置容器的内边距和外边距。内边距控制容器边框与内部内容之间的距离，外边距控制容器与周围其他组件之间的距离。
边框	设置容器的边框样式，包括边框的粗细、颜色和圆角。可以为容器添加可见的边界线，使其在视觉上与其他区域区分开。
背景	设置容器的背景颜色或背景图片。可以选择纯色、渐变色，或上传图片作为背景，让容器更具视觉效果。
弹性布局设置	当容器的显示类型为弹性布局时显示此配置。可以设置内部组件的排列方向（水平/垂直）、水平对齐方式和垂直对齐方式，控制内部组件如何排列和分布。
宽度设置/高度设置	当容器位于 Flex 布局内部时显示。可选择「弹性」（自动填充剩余空间）、「固定」（指定具体数值）或「适配」（根据内容自动调整）三种模式。
弹性比例	当选择弹性宽度/高度时显示。用于设置当前容器在父容器中占据的比例，数值越大占据的空间越多。
弹性宽度/弹性高度	当选择弹性模式时显示。设置容器在分配剩余空间前的默认尺寸。
固定宽度/固定高度	当选择固定模式时显示。设置容器的精确尺寸数值。
高度设置	选择容器高度是「固定」还是「适配」。固定高度需要指定具体数值，适配则根据内容自动调整。
高度	当选择固定高度时显示。输入具体的高度数值，支持 px、%、em、vh、vw 等单位。
最大高度	当选择适配高度时显示。限制容器的最大高度，防止内容过多时容器无限扩展。
最小高度	当选择适配高度时显示。确保容器至少有一定的高度，即使内容很少也不会过于扁平。
宽度设置	选择容器宽度是「固定」还是「适配」。固定宽度需要指定具体数值，适配则根据内容或父容器自动调整。
宽度	当选择固定宽度时显示。输入具体的宽度数值，支持 px、%、em、vh、vw 等单位。
最大宽度	当选择适配宽度时显示。限制容器的最大宽度，常用于响应式布局中控制内容区域不会过宽。
最小宽度	当选择适配宽度时显示。确保容器至少有一定的宽度，防止内容被过度压缩。
水平内容超出	设置当内部内容宽度超过容器宽度时的处理方式。可选：超出显示（内容溢出可见）、超出隐藏（裁剪溢出部分）、水平滚动（显示滚动条）、自动适配（需要时才显示滚动条）。
垂直内容超出	设置当内部内容高度超过容器高度时的处理方式。可选：超出显示、超出隐藏、垂直滚动、自动适配。当容器设置了固定高度且内容较多时，建议设置为「垂直滚动」或「自动适配」。
对齐方式	当容器设置了固定宽度或最大宽度时显示。可选择靠左、居中或靠右，控制容器在父容器中的水平位置。
内部对齐方式	当容器不是弹性布局时显示。设置容器内部文字和行内元素的水平对齐方式，可选左对齐、居中、右对齐或两端对齐。

事件折叠组

配置项	说明
添加事件	支持「点击」、「鼠标移入」、「鼠标移出」三种触发事件。可以为容器添加交互行为，例如点击容器时打开弹窗、鼠标移入时改变样式等。在 AI 应用中，可以用于点击某个区域触发特定的工作流。

高级

配置折叠组

配置项	说明
显示类型	设置容器的 CSS 显示模式。可选：弹性布局（flex，用于灵活排列内部组件）、块级（block，独占一行）、行内块（inline-block，可与其他元素并排）、行内元素（inline，不独占行）。默认为弹性布局。
如何换行	当显示类型为弹性布局时显示。设置内部组件超出容器宽度时是否换行。可选：不换行（所有组件挤在一行）、自动换行（超出时换到下一行）、自动换行（颠倒，换行后顺序相反）。
显示层级	当容器使用非默认定位时显示。数值越大，容器越显示在上层。当多个容器重叠时，层级高的会遮挡层级低的。
定位模式	设置容器的定位方式。可选：默认（跟随文档流）、相对原位置定位（可微调位置但仍占据原空间）、视窗中悬浮（固定在屏幕某位置，不随页面滚动）、绝对定位（相对于最近的定位父元素定位）。
参考位置	当定位模式为悬浮或绝对定位时显示。设置定位的参考角，可选左上角、右上角、右下角、左下角。
布局位置	当定位模式不是默认时显示。精确设置容器距离上、右、下、左边界的距离。
滚动吸附	开启后，当页面滚动到容器位置时，容器会自动吸附在页面顶部或底部。适用于需要固定显示的导航栏或工具栏。
吸附位置	当开启滚动吸附时显示。设置吸附在页面顶部还是底部，或自动判断。

状态折叠组

配置项	说明
可见	控制容器是否显示。可以设置为始终可见，或绑定变量根据条件动态控制显示隐藏。
隐藏	与「可见」相反，控制容器是否隐藏。
禁用	控制容器内的交互组件是否可用。开启后，容器内的按钮、输入框等组件将变为不可操作状态。