结构组件 structure-components

选择此类型以浏览并从Journey Optimizer B2B edition库或连接的Market Engage实例中选择图像资源。

{width="700" modal="regular"}

从该对话框中，可以从所选存储库中选择图像。 单击​ 选择 ​以添加资产。

有多种工具可帮助您找到所需的资源：

• 单击左上角的​ 筛选器 ​图标以根据您的条件筛选显示的项目。

• 在​ 搜索 ​字段中输入文本，以筛选显示的项目以匹配资源名称。

  {width="700" modal="regular"}

选择此类型以浏览并从配置的Experience Manager Assets存储库中选择图像资源。

从​ 选择Assets ​对话框中，使用可用工具选择一个图像以查找所需的资源，然后单击​选择：

• 更改右上角的​存储库。

• 单击右上角的​ 管理资源 ​可在其他浏览器选项卡中打开Assets存储库并使用AEM Assets管理工具。

• 单击右上角的​ 视图类型 ​选择器以将显示更改为​列表视图、网格视图、图库视图​或​瀑布视图。

• 单击​ 排序顺序 ​图标可在升序和降序之间更改排序顺序。

  {width="700" modal="regular"}

• 单击​ 排序方式 ​菜单箭头以将排序条件更改为​名称、大小​或​修改时间。

• 单击左上角的​ 筛选器 ​图标以根据您的条件筛选显示的项目。

• 在​ 搜索 ​字段中输入文本，以筛选显示的项目以匹配资源名称。

  {width="700" modal="regular"}

选择此类型以从系统中选择一个文件，并将其导入Journey Optimizer B2B edition资源库。

在​ 上传图像 ​对话框中，将文件从您的系统拖放到文件框中。 最大文件大小为100 MB。

{width="450"}

对话框中显示所选图像的文件名。 资源文件名必须是唯一的（跨文件夹），如果具有该名称的文件已存在，则会显示一条消息。 名称最多可包含100个字符，并且不能包含特殊字符（如;、:、\和|）。

单击​导入。

1. 在选择了​ 样式 ​选项卡的右侧面板上，展开​ 边框 ​部分并设置相应选项以显示组件的边框：

2. 将切换开关右移以启用边框显示选项，并根据您的设计标准进行设置：

   • 若要设置​边框颜色，请选中该复选框，然后单击颜色正方形以从选取器中选择颜色。 您可以通过输入已知的RGB、HSL、HSB或十六进制值来选择颜色。 或者，可以使用颜色滑块和颜色域来选择颜色。

   {width="300"}

   • 要设置​边框大小 （线条宽度），请单击向上和向下箭头图标以增加或减少像素数。

   • 若要设置​边框样式，请从标准CSS border-style值列表中选择一个值。

   • 要确定显示边框的位置，请选中每个​ 边框位置 ​复选框。

   {width="250"}

3. 对于​边框半径，根据您想要的拐角曲线设置数值。

   值为0（默认）会产生一个方形角。

在选择了​ 样式 ​选项卡的右侧面板上，展开​ 边距 ​部分并设置结构组件中的边距间距选项。 此样式复制CSS margin参数，该参数控制组件边框之外的空间，将其与其他组件分开。 它会在组件周围创建一个间隙，以影响其定位和周围内容的布局。

根据设计需要设置边距值（像素）。 您可以单独设置组件的所有边、上边框、左右边或每侧的边距：

• 所有边 — 若要设置一个值以应用于所有边，请清除每个边的​ 不同边距 ​复选框。 单击向上和向下箭头图标以增加或减少像素数。

  {width="250"}

• 上下 — 若要将上边距和下边距设置为相同的值，请设置上设置和下设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

• 左右边距 — 若要将左右边距设置为相同的值，请设置左右设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

  {width="250"}

• 独立 — 若要将每个边距设置为独立值，请在上下设置之间以及左右设置之间设置​ Unlocked ​图标。 对于每个设置，单击向上和向下箭头图标以增加或减少像素数。

  {width="250"}

若要使用值应用其他符合CSS的属性，请使用​ 高级 ​样式设置。 您可以更改现有属性的值或添加新属性。 样式使用父 — 子组件（元素）的CSS继承模型应用于组件。

显示的属性反映当前为组件定义的样式。 您可以根据CSS定义更改值。 单击​添加 (+)图标为组件添加新的样式属性。

{width="250"}

• 背景颜色 — 选中该复选框并单击颜色正方形以从选取器中选择颜色。 您可以通过输入已知的RGB、HSL、HSB或十六进制值来选择颜色。 或者，可以使用颜色滑块和颜色域来选择颜色。

  {width="300"}

• 背景图像 — 移动切换选择器以启用背景图像设置。

  {width="250"}

  选择资源源类型并选择图像文件。

1. 在选择了​ 样式 ​选项卡的右侧面板上，展开​ 边框 ​部分并设置相应选项以显示组件的边框：

2. 将切换开关右移以启用边框显示选项，并根据您的设计标准进行设置：

   • 若要设置​边框颜色，请选中该复选框，然后单击颜色正方形以从选取器中选择颜色。 您可以通过输入已知的RGB、HSL、HSB或十六进制值来选择颜色。 或者，可以使用颜色滑块和颜色域来选择颜色。

   {width="300"}

   • 要设置​边框大小 （线条宽度），请单击向上和向下箭头图标以增加或减少像素数。

   • 若要设置​边框样式，请从标准CSS border-style值列表中选择一个值。

   • 要确定显示边框的位置，请选中每个​ 边框位置 ​复选框。

   {width="250"}

3. 对于​边框半径，根据您想要的拐角曲线设置数值。

   值为0（默认）会产生一个方形角。

展开​ 对齐方式 ​部分，然后选择要使用的垂直对齐方式：顶部、中间或底部。 此样式将转换为标准vertical-align CSS样式，并影响容器组件中的位置。

{width="250"}

在选择了​ 样式 ​选项卡的右侧面板上，展开​ 边距 ​部分并设置结构组件中的边距间距选项。 此样式复制CSS margin参数，该参数控制组件边框之外的空间，将其与其他组件分开。 它会在组件周围创建一个间隙，以影响其定位和周围内容的布局。

根据设计需要设置边距值（像素）。 您可以单独设置组件的所有边、上边框、左右边或每侧的边距：

• 所有边 — 若要设置一个值以应用于所有边，请清除每个边的​ 不同边距 ​复选框。 单击向上和向下箭头图标以增加或减少像素数。

  {width="250"}

• 上下 — 若要将上边距和下边距设置为相同的值，请设置上设置和下设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

• 左右边距 — 若要将左右边距设置为相同的值，请设置左右设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

  {width="250"}

• 独立 — 若要将每个边距设置为独立值，请在上下设置之间以及左右设置之间设置​ Unlocked ​图标。 对于每个设置，单击向上和向下箭头图标以增加或减少像素数。

  {width="250"}

若要使用值应用其他符合CSS的属性，请使用​ 高级 ​样式设置。 您可以更改现有属性的值或添加新属性。 样式使用父 — 子组件（元素）的CSS继承模型应用于组件。

显示的属性反映当前为组件定义的样式。 您可以根据CSS定义更改值。 单击​添加 (+)图标为组件添加新的样式属性。

{width="250"}