跳转到主要内容
容器控件
超过 6 个月前更新

使用容器来保持您的内容居中和清晰。

易企办的容器控件是一种应用相同顺序、定位和大小设置于同一容器内一组项目的方式。这些项目可以是放置在父容器内的其他容器,或是控件。

容器控件是以列或行的方式组织项目的灵活方法。它既高效又动态,并且响应迅速。

容器控件在两个轴上操作。主轴横跨容器的宽度,而交叉轴则实际上横跨容器的高度。

容器选项允许用户在三个级别定义这些设置:

  1. 容器级别 - 这些设置将影响容器本身、其大小和布局。

  2. 项目组级别 - 这些设置将影响作为一组的项目。例如,项目的方向、它们之间的间距、对齐方式等。

  3. 特定项目级别 - 容器内的每个项目都可以接受特定的设置,这些设置将覆盖组设置。例如,如果组是居中对齐的,您可以定义一个项目对齐到Flex Start(容器顶部)。

容器与章节和列的区别:

这里有一些关于容器与章节和列之间关系的事项:

  • 容器可以添加到章节的列中,而章节不能添加到容器中。

  • 容器可以添加到网格中,而章节不能添加到网格中。

  • 容器内的项目可以横向或纵向组织,而章节内的项目只能纵向组织。

  • 容器内的项目可以在高级选项卡下(在容器子项中)设置其项目级样式,而章节内的项目没有这个选项。


容器的作用是什么?

容器简化了页面布局,只使用一个包装元素,而不是两个——列和章节,允许您将控件组合在一个容器中。这种方法将使您能够创建高度复杂的页面设计,同时显著减少DOM膨胀。

使用容器将使您能够:

  • 优化布局 - 确定控制或多个控件在容器内的方向、对齐、顺序、长度和位置,无需额外的列或内部章节。这允许您优化页面上的小部件布局。

  • 更好的设计控制 - 使用容器可以更好地控制设计。首先在容器内分组元素,然后可以将其大小调整为完美适应您的页面。您可以控制容器内元素的布局和分布,并调整内容以适应每个屏幕大小,从而在不影响速度的情况下实现更大的响应性。

  • 增强嵌套能力 - 将一个容器嵌套在另一个容器内,以获得更大的灵活性和复杂的布局。

  • 超链接整个容器包装器 - 通过超链接整个容器包装器,改善容器内内容的可用性。


如何添加容器?

您可以从控制面板添加容器控件到您的页面。默认情况下,章节将跨越整个主体的全宽。


调整容器的大小和行为

您可以通过导航到布局选项卡>容器部分来调整容器的大小和行为。

宽度

容器的宽度默认为100%。您也可以设置特定的宽度:

  1. px: 像素

  2. %: 百分比

  3. em: Em(相对于元素的字体大小)

  4. rem: Root em(相对于根元素的字体大小)

  5. vh: 视口高度

  6. 计算函数

高度

章节的高度会根据其内容自动调整 - 当您添加控制时,章节会变得更高。您也可以设置最小高度。

最小高度滑块控制容器内容的最小高度:

  • px: 像素

  • %: 百分比

  • em: Em(相对于元素的字体大小)

  • rem: Root em(相对于根元素的字体大小)

  • vh: 视口高度

  • 计算函数

溢出

溢出选项控制如果容器的内容不适合视口,溢出的内容是否应该隐藏,或者可见,导致水平滚动。

  • 默认: 允许项目溢出容器外。

  • 隐藏: 隐藏溢出的项目。溢出的项目不可访问。

  • 自动: 当内容溢出时创建滚动条以保持项目可访问。这个设置允许在移动视图中滑动内容。

  • 滚动: 启用滚动条来管理溢出项目,允许用户滚动查看超出可见区域的内容。

HTML tag

通过从下拉菜单中选择最合适的HTML标签为您的容器包装整个容器。


动作

有关动作设置,请参阅:容器动作类型


调整包含的元素

介绍

您可以通过导航到布局选项卡>项目部分来调整容器的样式。


方向

使用方向选项确定包含元素将出现的方向。

  • 行:项目水平位置。

  • 列:项目垂直位置。

  • 行反转:项目水平但以相反顺序位置。

  • 列反转:项目垂直但以相反顺序位置。

元素垂直对齐

根据在方向字段中选择的方向,控制包含项目将如何在其中心轴上对齐。

  • 顶部:项目对齐到容器的开始。

  • 中部:项目对齐到容器的中心。

  • 底部:项目对齐到容器的结束。

  • 拉伸:项目在容器中拉伸。

水平对齐

根据在方向字段中选择的方向,控制包含项目将如何在其中心轴上对齐。它还有助于在容器中分配剩余空间。

  • 顶部:项目对齐到顶部。

  • 中部:项目垂直居中。

  • 底部:项目对齐到底部。

  • 之间留空:项目从边缘到边缘均匀分布。

  • 周围留空:项目沿元素和边缘均匀分布。

  • 均匀留空:项目之间、之前和之后的空间相等。

元素间隙

控制一个元素到另一个(控制或另一个容器)的间隔,以像素(PX)或百分比(%)。

换行

控制包含的项目是否被迫保持在一行中,或溢出到下一行。换行将在项目不再适合容器时折断行,而不换行将保持所有小部件在一行中。

  • 不换行:项目将被迫保持在一行中。

  • 换行:行将在项目不再适合容器时折断,并溢出到额外的行。

显示

动态显示规则:当您设置动态显示规则时,它将根据特定条件和规则表现出不同的行为。学习如何为控制创建动态显示规则。


设置容器样式

背景(常规和悬停)

选择常规(允许您设置背景颜色或图片)、渐变(允许您设置颜色渐变背景)之间。

  1. 背景类型 - 选择背景类型,颜色,渐变,图片。

  2. 颜色(背景):从颜色选择器中选择颜色。

  3. 图片:点击选择或上传图片作为容器的背景图片。

背景叠加

  1. 背景类型 - 选择背景类型,颜色,渐变,图片。

  2. 颜色(背景):从颜色选择器中选择颜色。

  3. 图片:点击选择或上传图片作为容器的背景覆盖图片。

  4. 透明度:使用滑块或在字段中手动输入值。

边框(常规和悬停)

  • 边框类型:从下拉菜单中选择实线、双线、点状、虚线或槽形之间。

  • 宽度(边框):基于px在字段中输入所选值。

  • 颜色(边框):从颜色选择器中选择您的边框背景颜色。

  • 边框半径:基于px或%在字段中输入所选值。

  • 阴影:点击铅笔图标打开阴影属性选项。

排版

  • 文本颜色:您可以设置容器内的文本颜色。这将仅适用于没有预设颜色的字段,它不会覆盖现有颜色。

  • 文本对齐:您可以设置容器内的文本对齐。此设置仅适用于个别字段没有配置其自己的文本对齐的情况。


高级设置

设置适用于此控制的高级选项。

这是否解答了您的问题?