# 设置UI引擎前端页面组件样式 在前端页面开发中，样式是塑造用户界面、提升交互体验的核心要素。UI引擎基于低代码开发理念，深度融合可视化配置与代码自定义能力，既兼容传统高代码开发的样式逻辑，又提供更高效、直观的可视化管理方式。 无论您需要快速调整组件外观、实现数据驱动的动态样式，还是进行精细化的CSS高级定制，均能找到灵活适配的解决方案。 #### UI引擎支持的样式配置方式 UI引擎兼容传统Web开发的主流样式模式，并拓展为三种核心配置方式，覆盖不同开发场景需求： 表1样式配置方式 | 配置方式 | 说明 | |:---|:---| | 可视化样式面板 | 通过图形化界面调节颜色、布局、间距等属性，无需编码，即可实时预览效果。适用于快速原型设计、常规样式调整等场景。 | | 状态变量绑定 | 将样式属性绑定到页面状态（State），实现数据驱动的动态样式更新。适用于交互反馈（如状态变色）、条件渲染等需要动态变化的场景。 | | 自定义CSS代码 | 支持直接编写行内样式或全局CSS类，满足对样式有高级定制需求的场景。适用于复杂动效、主题覆盖、伪类控制等需要精细控制的情况。 | #### 前提条件 - 已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。 - 页面中已添加至少一个组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。 - 如需使用状态绑定，需提前创建状态变量，具体操作请参见[为UI引擎前端页面创建与管理状态](https://support.huaweicloud.com/usermanual-idme/idme_ui_0085.html)。 #### 可视化样式面板配置（推荐） 通过右侧"样式"设置面板，可直观调整组件的布局、尺寸、文本、背景、边框等属性，实现组件样式的精准定制。 1. 在页面设计器的中心画布区，单击选中目标组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532513925.png)，展开"样式"设置面板。 图1样式设置面板 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532513915.png "点击放大") 3. 根据实际业务需求，逐项设置样式属性。 表2组件样式配置信息 | 配置分类 | 配置项 | 配置说明 | |:---|:---|:---| | 样式类型 | 行内样式 | 直接作用于当前组件的样式，优先级高于全局样式。支持手动编写CSS代码，具体操作请参见[自定义CSS代码（高级）]。 | | 样式类型 | 全局样式 | 作用于整个项目的通用样式规则，适用于统一管理页面的整体风格。支持手动编写CSS代码，具体操作请参见[自定义CSS代码（高级）]。 | | 布局 | 排布 | 支持多种布局类型，适配不同的组件排列需求。 - 块级布局：组件以块状形式排列，默认占据一行空间。 - 弹性布局：提供灵活的布局方式，可设置主轴方向、对齐方式、换行模式。 - 网格布局：提供精确的网格布局能力。 - 编辑网格：设置列间距、行间距、方向（横向/纵向）、Dense（紧密填满）等参数。 - 对齐：主轴和辅轴分别支持多种对齐选项（如center、stretch、baseline等）。 - 多行对齐：支持辅轴居中（center）、终点对齐（end）、拉伸对齐（stretch）、两端对齐（space-between）等。 - 内联块级：组件同行排列，可设置宽高。 - 内联：组件同行排列，宽高由内容决定。 - 隐藏：组件隐藏，不占据页面空间。 | | 间距 | Margin/Padding | 支持设置内外边距，单击数值输入框，在弹窗中自定义间距数值。 - Margin：外边距设置，支持自定义数值（单位为px）。 - Padding：内边距设置，支持自定义数值（单位为px）。 | | 尺寸 | 宽度 | 设置组件的宽度，支持固定值。 | | 尺寸 | 高度 | 设置组件的高度，支持固定值。 | | 尺寸 | 最小宽 | 设置组件的最小宽度限制，确保内容不会被压缩过小。 | | 尺寸 | 最小高 | 设置组件的最小高度限制，确保内容不会被压缩过小。 | | 尺寸 | 最大宽 | 设置组件的最大宽度限制，避免内容超出预期范围。 | | 尺寸 | 最大高 | 设置组件的最大高度限制，避免内容超出预期范围。 | | 尺寸 | 溢出 | 配置组件内容超出尺寸时的表现。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500674028.png)：溢出内容可见。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500833890.png)：溢出内容隐藏。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532593955.png)：溢出时显示滚动条。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532513919.png)：仅在内容溢出时自动显示滚动条。 | | 尺寸 | 适应 | 配置图片等媒体内容的填充方式，支持fill-填充、contain-包含、cover-原比例填充、none-无、scale-down-缩小。 单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500674034.png)，打开"Object position 设置"，自定义内容的Left、Top偏移量。 | | 定位 | 定位 | 配置组件的定位方式。可选：Static-默认定位、Relative-相对定位、Absolute-绝对定位、Fixed-固定定位、Sticky-粘性定位。 | | 文本 | Font | 配置字体和字体的粗细，可选：100-Thin、400-Normal、700-Bold、900-Black。 | | 文本 | Size | 配置字体大小，支持设置9-24px的数值。 | | 文本 | Height | 自定义文本行高。 | | 文本 | Color | 配置文本颜色。 | | 文本 | 对齐 | 配置文本对齐方式：Left（左对齐）、Center（居中对齐）、Right（右对齐）、Justify（两侧对齐） | | 文本 | 样式 | 配置文本装饰样式：Regular（常规）、None（无）、Italic（斜体）、Strikethrough（删除线）、Underline（下划线）、Overline（上划线）。 | | 背景 | 背景图\&渐变 | 配置组件背景，支持设置背景图片或渐变效果。 | | 背景 | 颜色 | 配置组件的纯色背景。 | | 背景 | 裁剪 | 配置背景的显示范围：None（无裁剪）、padding-box（裁剪到padding）、content-box（裁剪到content）、text（裁剪到文字）。 | | 边框 | 圆角 | 支持设置所有边角或分别定义每个角的圆角半径。 | | 边框 | 边框 | 配置边框样式。 - 样式：支持虚线（dashed）、圆点（dotted）、实线（solid）、无边框（none）。 - 宽度：自定义边框宽度。 - 颜色：自定义边框颜色。 | | 效果 | 透明度 | 配置组件的整体透明度，数值越小越透明。 | | 效果 | 轮廓 | 设置外轮廓样式（虚线、圆点、实线、无）。 | | 效果 | 光标 | 定义鼠标悬停时的光标样式，支持auto、default、pointer、not-allowed等多种类型。 | 4. 完成样式设置后，单击"保存"。 页面设计器会自动将样式写入到CSS类名中，并绑定到当前组件的属性中（如果没有类名，则自动生成随机类名）。 - 样式生效后，对应配置项的标签名会变为蓝色并添加蓝色底纹。 图2样式设置生效 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500833894.png "点击放大") - 如需清除某样式设置，单击对应配置项，在弹出的操作浮层中单击"重置"即可。 图3重置样式 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532593961.png "点击放大") #### 通过状态变量动态绑定样式 在实际业务中，常需实现样式随数据变化的动态响应（如库存不足时文字变红、状态切换时组件背景变色），通过将行内样式与状态变量绑定，可快速实现这一需求。 1. 在页面设计器的中心画布区，单击选中目标组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532513923.png)，展开"样式"设置面板。 3. 找到"行内样式"属性，单击其右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500674036.png)，弹出"变量绑定"窗口。 图4变量绑定 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500833896.png "点击放大") 4. 在"变量列表"中，选择"State属性"分类下的目标属性变量，单击"确定"。 绑定完成后，当状态变量的值发生变化时，组件的对应样式将自动同步更新，无需手动刷新或编写代码。 图5绑定属性变量 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532593963.png "点击放大") #### 自定义CSS代码（高级） 当可视化面板无法满足复杂样式需求（如动画效果、媒体查询、伪类控制），可通过编写CSS代码实现精细化定制，支持"自定义行内样式"和"自定义全局样式"两种方式。 - **自定义行内样式** ： 行内样式直接绑定到组件"style"属性，样式优先级最高，适用于需要覆盖其他样式规则的场景。 1. 在页面设计器的中心画布区，单击选中目标组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532513921.png)，展开"样式"设置面板。 3. 找到"行内样式"属性，单击其右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500674046.png)，弹出"编辑行内样式"窗口。 图6编辑行内样式 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500833898.png "点击放大") 4. 在弹出的窗口中，根据实际业务需求，按CSS语法编写样式，需要在":root { }"内定义，每个属性以英文分号（;）结尾。 图7编写样式 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532593967.png "点击放大") 5. 编写完成后，单击"保存"，样式将立即作用于当前组件。 - **自定义全局样式** 全局样式适用于需要在多个组件间复用的样式规则，支持编写媒体查询、多类选择器等复杂CSS语法。 1. 在页面设计器的中心画布区，单击选中目标组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532593951.png)，展开"样式"设置面板。 3. 找到"全局样式"属性，单击其左侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500674038.png)，弹出"Css编辑"窗口。 图8编辑全局样式 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500833904.png "点击放大") 4. 在弹出的窗口中，编写CSS样式（无":root { }"限制），可通过"class"或者"id"绑定样式。 ![](https://support.huaweicloud.com/usermanual-idme/public_sys-resources/caution_3.0-zh-cn.png) 修改全局样式时，需要注意样式类的作用范围，避免覆盖其他组件样式。 图9CSS编辑 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532593973.png "点击放大") 5. 编写完成后，单击"保存"，返回"样式"设置面板。 6. 单击"全局样式"输入框，可自定义创建新选择器，或选择已有选择器进行绑定。 图10全局样式 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532513929.png "点击放大") - **伪类支持（仅限全局样式）** UI引擎支持为"全局样式"选择器配置伪类，实现组件交互态的样式定制（如鼠标悬浮、聚焦、禁用等状态）。 1. 单击"全局样式"输入框，选择目标选择器。 2. 单击"全局样式"右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532522009.png)，从下拉列表中选择目标伪类（可选值：None/hover/focused/pressed/disabled）。 图11设置伪类 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500682124.png "点击放大") 3. 在"样式"设置面板中，当选中某个伪类并对其样式属性进行修改后，系统将自动生成"类名:伪类"的样式规则（如".text-hover:hover"），用户可在CSS编辑器中查看完整代码。 图12伪类样式配置示例 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500841972.png "点击放大")