可以在 Experience Builder 中更改每个微件的默认样式设置以自定义属性，例如大小、位置、动画、背景、边框和框阴影。 选项会有所不同，具体取决于您添加到的页面类型或其父容器（例如行或列）所施加的约束，这些约束会自动控制大小和位置。
样式设置
微件配置面板中的样式选项卡包含一些选项，可在配置 Web 体验时更改图标和标注以区分微件。
注：
可以上传以下图像格式：PNG、GIF、JPG、JPEG 和 BMP。
连接微件时，图标和名称将显示在活动页面的轮廓视图和选择列表中。
可以为微件大小和位置设置明确的值，而不是在画布周围拖动微件来移动和调整其大小。 大小和位置设置通过宽度、高度和位置来定义微件在页面上的位置。 您可以以像素 (px) 或百分比 (%) 为单位指定这些值，以确定如何显示您的内容。 有关适用于已添加到全屏页面或滚动页面的微件的大小和位置设置，请参阅以下部分。
提示：
为了帮助您对齐并精确定位微件，在画布上拖动微件或在固定布局（例如全屏页面、窗口、侧边栏和列表）中手动移动微件并调整其大小时，将显示捕捉线和距离值。 值表示从微件到其容器侧边和附近微件的距离（如果距离可计算）。 （无法计算位置使用百分比、大小设置使用像素的微件。）显示捕捉线之后，对应的微件将跨所有屏幕分辨率一起捕捉。
大多数微件通用的样式设置包括以下内容：
- 保留在父容器中 - 防止嵌套微件被拖动到其父微件的边界之外。
- 动画 - 使用飞入、旋转和淡入等效果设置引人注目的动画样式。 您还可以设置过渡模式以在剖面视图之间移动。
- 背景 - 通过选择填充颜色或图像来设置微件的背景。 如果选择图像，则可以使用适合、填充、居中、平铺或拉伸将其放置在微件的边框内。 如果选择适合，则该微件将在图像周围显示背景填充颜色。
- 边框 - 通过选择微件的颜色、样式（如虚线或点划线）和宽度（以像素为单位）来设置其边框。 更改半径大小（按像素或百分比）以调整微件的角。 您可以对所有角使用相同的半径，也可以分别指定每个角的半径大小。
- 框阴影 - 使用以下设置在微件周围添加阴影效果：
- 偏移 X - 设置阴影的水平距离。 负值将阴影放置在微件的左侧，正值将阴影放置在微件的右侧。
- 偏移 Y - 设置阴影的垂直距离。 负值将阴影放在微件上方，正值将阴影放在微件下方。
- 模糊半径 - 向阴影应用模糊效果。
- 传播半径 - 调整阴影的大小。
- 颜色 - 选择阴影颜色。
全屏页面布局
向应用程序添加全屏页面时，可以在自由布局中组织微件。 如果在画布周围拖动微件以移动微件或调整其大小，则样式面板中的大学校和位置设置会相应更新。
大小设置是容器宽度和高度的组合。 您可以通过以下三种模式设置微件的宽度和高度：
- 自定义 -通过默认的自定义模式，您可以设置宽度和高度的特定值。 如果将宽度设置为拉伸或自定义，您可以单击锁定图标以保持横纵比，这使您可以通过拖动调整大小而不会破坏比例。
- 自动 - 如果将大小值设置为自动，则属性将基于微件内容自动设置。 此选项可用于显示动态内容的微件。
- 拉伸 - 根据其容器的的大小设置微件的大小。
注：
大小设置有一种特殊情况，即将微件放置在列或行微件内。 例如，如果将图像微件放置在列微件中，则只有两种图像宽度模式（拉伸和自定义），如果高度设置为自定义，则两种模式均可以将大小设置为保持横纵比。
微件的位置由其每一侧（左侧、右侧、顶部、底部）到其容器的距离定义。 例如，“左侧”表示微件的左边相对于其父容器的左边偏移的距离。 添加微件时，您可以通过在方向的输入框中输入一个值来指定“左侧”和“顶部”距离，也可以通过单击相反方向的更改为自定义或单击自定义设置的更改为自动来更改自定义方向。
不同的大小模式对应不同的位置设置。 例如，如果将“宽度”设置为自定义或自动，您可以更改“左”或“右”，而另一个将自动设置。 如果将“宽度”设置为拉伸，您可以通过自定义到左侧和右侧的距离来设置其位置，而宽度将根据容器宽度的剩余长度自动设置。 高度类似，但与“顶部”和“底部”相对应。
您也可以通过单击样式面板顶部工具栏上的按钮来更改位置。 例如，可将微件置于其父容器的水平中心，在这种情况下“左”和“右”位置方向均处于自动模式。
您还可以更改位置和大小的长度单位：
- px - 以像素为单位的绝对值。
- % - 容器的宽度和高度的百分比。
您可以通过为旋转设置一个正以顺时针旋转微件，或设置一个负数以逆时针旋转。
示例
以下列表介绍了一些推荐的大小和位置设置组合：
- 对于自定义宽度，请设置自定义左侧或右侧值，然后为其他值选择自动。
- 对于自定义高度，请设置自定义顶部或底部值，然后为其他值选择自动。
- 如果宽度选择自动，则设置自定义左侧和右侧值；或者仅为左侧或右侧设置自定义值，然后使宽度适应微件内容。
- 如果高度选择自动，则设置自定义顶部和底部值；或者仅为顶部或底部设置自定义值，然后使高度适应微件内容。
滚动页面上的块
将滚动页面添加到应用程序时，将在块中组织其布局。 块将使用与行微件中所用布局相似的多列格网布局。
块具有以下大小和位置设置：
- 宽度 - 按页面百分比设置固定宽度。
- 高度 - 以像素为单位设置高度值或选择自动以自动设置块高度。
- 偏移 X - 以像素为单位设置水平偏移。
- 偏移 Y - 以像素为单位设置垂直偏移。
提示：
单击微件工具栏上的图钉按钮以使微件在滚动页面上可见。
嵌套在块中的微件
在块的格网布局中，添加到块的微件的宽度范围可为 1 到 12 列。 您只能为嵌套在块中的微件指定高度值；其宽度由格网控制。
高度模式共有三种类型：
- 拉伸 - 使用其父容器的完整高度。 这是默认设置。
- 自动 - 高度值根据微件内容自动设置。
- 自定义 - 您可以以像素或百分比为单位指定高度值。 如果您选中保持横纵比，则可以拖动以调整微件的大小而不会破坏横纵比。
当您选择自动或自定义，则可以选择以下对齐选项之一：
- 顶部 - 将微件与块的顶部垂直对齐。
- 底部 - 将微件与块的底部垂直对齐。
- 居中 - 将微件与块的中心垂直对齐。
旋转设置允许您通过设置一个正数或负数来顺时针或逆时针旋转微件。
动画
Experience Builder 中支持使用动画来自定义微件的显示方式。 使用提供的效果和选项，您可以构建以下体验：
- 加载应用程序时，一个窗口旋转弹出。
- 向下滚动页面时，微件飞入。
- 导航一个部分时，后一个视图推动前一个视图。
- 当您将鼠标悬停在卡片微件上时，说明淡入。
支持四个级别的动画：
- 页面/窗口级别 - 受框架支持，并在页面/窗口设置中可用。 它控制所有显示动画的第一级别微件。
注：
第一级别微件是指直接添加到页面/窗口中的微件，不包括嵌套在布局微件中的微件。 可以在轮廓视图中查看嵌套关系。
- 容器级别 - 受框架支持，在块的样式选项卡、“固定面板”、“侧边栏”、“行”、“列”和“部分”微件中可用。 它控制容器的外观以及其中直接包含的微件（不包括嵌套微件）的显示动画。 对于“部分”微件，此级别还控制视图的切换方式。
- 单个微件级别 - 受框架支持并在微件设置的“样式”选项卡中可用。 此级别控制微件本身的显示方式。
注：
较低级别的动画将覆盖较高级别的动画。 例如，如果将微件添加到一行中，则当微件的设置中将动画设置为“无”时，将播放针对行定义的动画。 否则，将播放微件设置中的动画。
- 内部微件级别 - 由微件本身支持，且在微件设置的内容选项卡可用。 此级别控制微件内用户交互的动画。 例如，当用户切换书签时，“书签”微件播放过渡效果，同时“卡片”微件提供悬停动画以显示详细信息。
布局容器（块、固定面板、侧边栏、行和列）的动画由两部分组成。 使用容器动画，您可以自定义容器面板的显示方式。 使用包含的微件动画，您可以自定义直接添加到容器中的微件的显示方式。 将同时播放两个动画效果，且最后一个动画为叠加效果。 可以单击预览按钮以预览组合结果。
除了控制“部分”面板显示效果的进入动画之外，“部分”微件还包含另一个名为过渡动画的设置，该设置将控制视图的动画。 视图选项卡可控制视图面板的过渡方式，微件面板可控制视图中微件的显示方式。 当“部分”进入视图（随页面加载或滚动）时，当前视图的微件动画将随进入动画一同播放。 在视图之间切换时，将在视图动画之后播放微件动画。
动画设置
- 单击动画缩略图或更改按钮以打开效果面板。
- 单击效果缩略图以选择和预览单个效果。
- 单击预览按钮预览整体效果或组合效果。
- 一些效果可能具有其他设置选项：
- 效果 - 提供连续的自然微效果选项。
- 方向 - 定义诸如飞入和浮入等效果的移动方向。