使用容器来保持您的内容居中和清晰。
易企办的容器控件是一种应用相同顺序、定位和大小设置于同一容器内一组项目的方式。这些项目可以是放置在父容器内的其他容器,或是控件。
容器控件是以列或行的方式组织项目的灵活方法。它既高效又动态,并且响应迅速。
容器控件在两个轴上操作。主轴横跨容器的宽度,而交叉轴则实际上横跨容器的高度。
容器选项允许用户在三个级别定义这些设置:
容器级别 - 这些设置将影响容器本身、其大小和布局。
项目组级别 - 这些设置将影响作为一组的项目。例如,项目的方向、它们之间的间距、对齐方式等。
特定项目级别 - 容器内的每个项目都可以接受特定的设置,这些设置将覆盖组设置。例如,如果组是居中对齐的,您可以定义一个项目对齐到Flex Start(容器顶部)。
容器与章节和列的区别:
这里有一些关于容器与章节和列之间关系的事项:
容器可以添加到章节的列中,而章节不能添加到容器中。
容器可以添加到网格中,而章节不能添加到网格中。
容器内的项目可以横向或纵向组织,而章节内的项目只能纵向组织。
容器内的项目可以在高级选项卡下(在容器子项中)设置其项目级样式,而章节内的项目没有这个选项。
容器的作用是什么?
容器简化了页面布局,只使用一个包装元素,而不是两个——列和章节,允许您将控件组合在一个容器中。这种方法将使您能够创建高度复杂的页面设计,同时显著减少DOM膨胀。
使用容器将使您能够:
优化布局 - 确定控制或多个控件在容器内的方向、对齐、顺序、长度和位置,无需额外的列或内部章节。这允许您优化页面上的小部件布局。
更好的设计控制 - 使用容器可以更好地控制设计。首先在容器内分组元素,然后可以将其大小调整为完美适应您的页面。您可以控制容器内元素的布局和分布,并调整内容以适应每个屏幕大小,从而在不影响速度的情况下实现更大的响应性。
增强嵌套能力 - 将一个容器嵌套在另一个容器内,以获得更大的灵活性和复杂的布局。
超链接整个容器包装器 - 通过超链接整个容器包装器,改善容器内内容的可用性。
如何添加容器?
您可以从控制面板添加容器控件到您的页面。默认情况下,章节将跨越整个主体的全宽。
调整容器的大小和行为
您可以通过导航到布局选项卡>容器部分来调整容器的大小和行为。
宽度
容器的宽度默认为100%。您也可以设置特定的宽度:
高度
章节的高度会根据其内容自动调整 - 当您添加控制时,章节会变得更高。您也可以设置最小高度。
最小高度滑块控制容器内容的最小高度:
溢出
溢出选项控制如果容器的内容不适合视口,溢出的内容是否应该隐藏,或者可见,导致水平滚动。
默认: 允许项目溢出容器外。
隐藏: 隐藏溢出的项目。溢出的项目不可访问。
自动: 当内容溢出时创建滚动条以保持项目可访问。这个设置允许在移动视图中滑动内容。
滚动: 启用滚动条来管理溢出项目,允许用户滚动查看超出可见区域的内容。
HTML tag
通过从下拉菜单中选择最合适的HTML标签为您的容器包装整个容器。
默认: 在HTML中将容器设置为div标签。
div: 在HTML中将容器设置为div标签。
a: 从HTML标签下拉选择器中选择“a”选项使此容器可点击。然后下面将出现一个链接选项。在字段中输入所需的URL,使用https://或使用点击堆栈图标的动态选项。您也可以选择在新标签页中打开链接或添加额外的自定义属性。
动作
有关动作设置,请参阅:容器动作类型
调整包含的元素
介绍
您可以通过导航到布局选项卡>项目部分来调整容器的样式。
方向
使用方向选项确定包含元素将出现的方向。
元素垂直对齐
根据在方向字段中选择的方向,控制包含项目将如何在其中心轴上对齐。
水平对齐
根据在方向字段中选择的方向,控制包含项目将如何在其中心轴上对齐。它还有助于在容器中分配剩余空间。
元素间隙
控制一个元素到另一个(控制或另一个容器)的间隔,以像素(PX)或百分比(%)。
换行
控制包含的项目是否被迫保持在一行中,或溢出到下一行。换行将在项目不再适合容器时折断行,而不换行将保持所有小部件在一行中。
显示
动态显示规则:当您设置动态显示规则时,它将根据特定条件和规则表现出不同的行为。学习如何为控制创建动态显示规则。
设置容器样式
背景(常规和悬停)
选择常规(允许您设置背景颜色或图片)、渐变(允许您设置颜色渐变背景)之间。
背景叠加
边框(常规和悬停)
边框类型:从下拉菜单中选择实线、双线、点状、虚线或槽形之间。
宽度(边框):基于px在字段中输入所选值。
颜色(边框):从颜色选择器中选择您的边框背景颜色。
边框半径:基于px或%在字段中输入所选值。
阴影:点击铅笔图标打开阴影属性选项。
排版
高级设置
设置适用于此控制的高级选项。