布局 — 选项卡
创建对象：
- 初学者
- 中级
- 用户
使用 选项卡 内容类型在Page Builder 阶段中添加一组选项卡。 将制表符占位符从面板拖到舞台时，最初会显示一个默认制表符。 您可以添加更多选项卡以创建完整集合。 选项卡集的宽度由其父容器的宽度和填充设置决定。
NOTE工具箱
在使用 选项卡 内容类型时，您可以添加和编辑单个选项卡以及包含一个或多个选项卡的选项卡容器。 每个选项卡都有自己的工具箱，用于在Page Builder阶段设计选项卡。
单个选项卡工具箱
| 工具 | 图标 | 描述 |
|---|---|---|
| 移动 |
 | 选项卡标签旁边的此控件用于将单个选项卡移动到选项卡集中的另一个位置。 |
| 设置 |
 | 打开“编辑选项卡”页面，您可以在该页面中更改各个选项卡的属性。 |
| 复制 |
 | 制作选项卡的副本。 |
| 移除 |
 | 从选项卡集中删除选项卡。 |
选项卡容器工具箱
| 工具 | 图标 | 描述 |
|---|---|---|
| 移动 |
| 将这组选项卡移至父容器中网格上的另一个位置。 |
| 添加 |
 | 向选项卡集添加选项卡。 |
| （标签） | Tabs | 将当前容器标识为选项卡集。 将鼠标悬停在容器的顶部边框上可查看工具箱。 |
| 设置 |
| 打开“编辑”选项卡页面，您可以在该页面更改容器的属性。 |
| 隐藏 |
 | 隐藏选项卡容器。 |
| 显示 |
 | 显示隐藏的选项卡容器。 |
| 复制 |
| 复制当前选项卡。 |
| 移除 |
| 从舞台中删除当前选项卡集。 |
NOTE添加单个选项卡
-
在 Layout 下的Page Builder面板中，将 Tabs 占位符直接拖到舞台上，或拖到舞台上的行或列上。
-
单击 Tab 1 标签以显示单个选项卡工具箱，然后选择 设置 （
-
输入要用作标签的 Tab Name。
-
如果需要，请输入选项卡的 Minimum Height。
此值可以是具有任何有效CSS单位（如
100px、50%、50em、100vh）的数字，也可以是计算（如100vh - 237px）。 -
选择 Vertical Alignment 设置以对齐添加到选项卡的任何内容容器（“顶部”、“中心”或“底部”）。
-
如果需要，请按照以下部分设置其他选项：
-
单击右上角的 Save 以应用设置并返回到Page Builder工作区。
添加一组选项卡
以下步骤从单个选项卡开始，并在选项卡容器中创建一组三个选项卡。 如果您还没有单独的选项卡，请按照之前的说明将单个选项卡添加到舞台。
-
将鼠标悬停在选项卡容器上以显示工具箱，然后选择 添加 （
-
单击 Tab 2 标签以显示光标，并为选项卡输入您自己的标签。
-
再次单击舞台上的第二个选项卡，然后选择 复制 （
-
单击YourName Copy 标签以显示光标，并为第三个选项卡输入您自己的标签。
在集中移动选项卡
-
单击要移动的选项卡。
-
选择选项卡标签文本前显示的 移动 （
将内容添加到选项卡
您可以像对行一样对选项卡使用任何内容类型。 使用以下步骤添加文本内容类型作为示例。
-
单击要在其中添加内容的选项卡。
-
在Page Builder面板中，展开 Elements 并将 Text 占位符拖到选项卡中。
-
在编辑器中输入或粘贴一些文本，并根据需要使用编辑器工具栏设置格式。
有关使用文本内容类型的详细信息，请参阅元素 — 文本。
-
单击右上角的 Save。
更改单个选项卡设置
-
将鼠标悬停在单个选项卡上以显示工具箱，然后选择 设置 （
-
如果需要，请更改选项卡的任何基本设置：
-
Tab Name — 输入选项卡标签的修订文本。 您还可以直接在舞台上修改标签。
-
Minimum Height — 如果要覆盖自动高度，请输入像素。 例如，您可以设置与背景图像高度匹配的最小高度，以确保完整图像可见。
-
Vertical Alignment — 选择添加到选项卡的内容容器的垂直位置。
-
-
使用以下部分根据需要更改其他设置，以了解详细信息。
-
完成后，单击 Save 以应用设置并返回到Page Builder工作区。
背景
-
Background Color — 通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定背景颜色。 此设置确定行的背景颜色。 您还可以调整颜色的不透明度。
您可以通过三种方式输入值：
-
预定义的颜色名称，如
White -
颜色的十六进制颜色值，如
#ffffff -
颜色的rgba值，具有不透明度百分比，如
rgba(255, 255, 255, 0.75)
如果要选择颜色，请单击 无颜色 框左侧的色板。
如果单击颜色框再次打开拾色器，则滑块下方的框显示当前的红色、绿色、蓝色和Alpha值(rgba)。 最后一个数字以小数表示当前的不透明度百分比。 可以使用滑块调整不透明度，或输入所需的小数值。
NOTEPage Builder还支持背景图像中的透明层，即_Alpha通道_，这些背景图像可用于创建具有不同不透明度的背景。 -
-
Background Image — 如果需要，请使用提供的工具选择要应用于选项卡的背景图像：
工具描述Upload将图像文件从本地计算机上载到图片库，然后将其作为选项卡的背景图像应用。Select from Gallery提示您从图库中选择现有图像作为选项卡的背景图像。
允许您将图像拖到相机图块或浏览到本地文件系统中的图像。 -
Background Mobile Image — 如果需要，请使用相同的工具选择不同的背景图像以在移动设备上显示。
-
Background Size — 选择相对于选项卡宽度的背景图像缩放方式：
选项描述Cover背景图像覆盖选项卡的全部宽度。Contain背景图像仅限于选项卡区域的宽度。Auto应用当前样式表中的大小。 -
Background Position — 选择与选项卡相关的背景图像锚定方式：
Top Left/Top Center/Top Right/Center Left/Center/Center Right/Bottom Left/Bottom Center/Bottom Right -
Background Attachment — 选择附件类型以确定背景图像相对于滚动页面的移动方式：
选项描述Scroll当页面滚动时，将同步附加的背景图像以向下移动。Fixed（不适用于移动设备）当容器在图像上滚动并且固定在指定的背景位置时，背景图像不会移动。 -
Background Repeat — 设置为
Yes可重复背景图像以填充选项卡中的可用空间。
高级
-
要控制添加到选项卡的内容容器的水平对齐方式，请选择 Alignment 。
选项描述Default应用在当前主题的样式表中指定的对齐默认设置。Left将内容容器沿选项卡的左边框对齐，并允许使用指定的任何边距。Center将内容容器对齐选项卡的中央，并允许使用指定的任何边距。Right将内容容器沿选项卡的右边框对齐，并允许使用指定的任何边距。 -
设置应用于选项卡容器所有四个侧面的 Border 样式：
选项描述Default应用关联样式表指定的默认边框样式。None不提供任何容器边框的可见指示。Dotted容器边框显示为虚线。Dashed容器边框显示为虚线。Solid容器边框显示为实线。Double容器边框显示为双线。Groove容器边框显示为一条开槽线。Ridge容器边框显示为脊线。Inset容器边框显示为内嵌行。Outset容器边框显示为外线。 -
如果设置了除
None之外的边框样式，请完成边框显示选项：
选项描述Border Color通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。Border Width输入边框线条宽度的像素数。Border Radius输入像素数，以定义用于使边框每个角倒圆角的半径大小。以下示例中的行的边框半径为15。
边框半径为15
-
（可选）从当前样式表中指定要应用于列容器的 CSS classes 的名称。
用空格分隔多个类名。
-
输入 Margins and Padding 的值（以像素为单位）以指定列的外部边距和内边距。
在选项卡容器图表中输入每个相应的值。
容器区域描述Margins应用于容器所有边的外边缘的空白空间量。 选项：Top/Right/Bottom/LeftPadding应用于容器所有边的内边缘的空白空间量。 选项：Top/Right/Bottom/Left
更改选项卡集设置
-
将鼠标悬停在选项卡集容器的顶部边框上以显示工具箱，然后选择 设置 （
-
如果需要，请更改 Default Active Tab。
在集中选择加载页面时要处于活动状态的选项卡。
-
如果要覆盖选项卡集的自动高度，请输入 Minimum Height（以像素为单位）。
-
若要沿选项卡集顶部定位导航选项卡，请选择 Tab Navigation Alignment （
Left、Center或Right）。
-
为选项卡集设置高级选项：
-
若要控制标签集在父容器中的位置，请选择 Alignment：
选项描述Default应用在当前主题的样式表中指定的对齐默认设置。Left沿父容器的左边框对齐选项卡集，并允许指定的任何边距。Center将选项卡集对齐父容器的中心，并允许指定的任何边距。Right沿父容器的右边框对齐选项卡集，并允许指定的任何边距。 -
设置应用于选项卡容器所有四个侧面的 Border 样式：
选项描述Default应用关联样式表指定的默认边框样式。None不提供任何容器边框的可见指示。Dotted容器边框显示为虚线。Dashed容器边框显示为虚线。Solid容器边框显示为实线。Double容器边框显示为双线。Groove容器边框显示为一条开槽线。Ridge容器边框显示为脊线。Inset容器边框显示为内嵌行。Outset容器边框显示为外线。 -
如果设置了除
None之外的边框样式，请完成边框显示选项：选项描述Border Color通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。Border Width输入边框线条宽度的像素数。Border Radius输入像素数，以定义用于使边框每个角倒圆角的半径大小。 -
（可选）从当前样式表中指定要应用于选项卡容器的 CSS classes 的名称。
用空格分隔多个类名。
-
输入 Margins and Padding 的值（以像素为单位）以确定制表符容器的外边距和内边距。
在选项卡容器图表中输入相应的值。
容器区域描述Margins应用于容器所有边的外边缘的空白空间量。 选项：Top/Right/Bottom/LeftPadding应用于容器所有边的内边缘的空白空间量。 选项：Top/Right/Bottom/Left
-
-
完成后，单击 Save 以应用设置并返回到Page Builder工作区。