设置UI引擎前端页面组件样式

UI引擎支持的样式配置方式

UI引擎兼容传统Web开发的主流样式模式，并拓展为三种核心配置方式，覆盖不同开发场景需求：

前提条件

• 已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。
• 页面中已添加至少一个组件，具体操作请参见为UI引擎前端页面添加物料组件。
• 如需使用状态绑定，需提前创建状态变量，具体操作请参见为UI引擎前端页面创建与管理状态。

可视化样式面板配置（推荐）

通过右侧“样式”设置面板，可直观调整组件的布局、尺寸、文本、背景、边框等属性，实现组件样式的精准定制。

1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击，展开“样式”设置面板。
   图1 样式设置面板
   

3. 根据实际业务需求，逐项设置样式属性。

   表2 组件样式配置信息

   配置分类	配置项	配置说明
   样式类型	行内样式	直接作用于当前组件的样式，优先级高于全局样式。支持手动编写CSS代码，具体操作请参见自定义CSS代码（高级）。
   	全局样式	作用于整个项目的通用样式规则，适用于统一管理页面的整体风格。支持手动编写CSS代码，具体操作请参见自定义CSS代码（高级）。
   布局	排布	支持多种布局类型，适配不同的组件排列需求。 块级布局：组件以块状形式排列，默认占据一行空间。 弹性布局：提供灵活的布局方式，可设置主轴方向、对齐方式、换行模式。 网格布局：提供精确的网格布局能力。 编辑网格：设置列间距、行间距、方向（横向/纵向）、Dense（紧密填满）等参数。 对齐：主轴和辅轴分别支持多种对齐选项（如center、stretch、baseline等）。 多行对齐：支持辅轴居中（center）、终点对齐（end）、拉伸对齐（stretch）、两端对齐（space-between）等。 内联块级：组件同行排列，可设置宽高。 内联：组件同行排列，宽高由内容决定。 隐藏：组件隐藏，不占据页面空间。
   间距	Margin/Padding	支持设置内外边距，单击数值输入框，在弹窗中自定义间距数值。 Margin：外边距设置，支持自定义数值（单位为px）。 Padding：内边距设置，支持自定义数值（单位为px）。
   尺寸	宽度	设置组件的宽，支持固定值。
   	高度	设置组件的高，支持固定值。
   	最小宽	设置组件的最小宽度限制，确保内容不会被压缩过小。
   	最小高	设置组件的最小高度限制，确保内容不会被压缩过小。
   	最大宽	设置组件的最大宽度限制，避免内容超出预期范围。
   	最大高	设置组件的最大高度限制，避免内容超出预期范围。
   	溢出	配置组件内容超出尺寸时的表现。 ：溢出内容可见。 ：溢出内容隐藏。 ：溢出时显示滚动条。 ：仅在内容溢出时自动显示滚动条。
   	适应	配置图片等媒体内容的填充方式，支持fill-填充、contain-包含、cover-原比例填充、none-无、scale-down-缩小。 单击，打开“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 样式设置生效
     
   • 如需清除某样式设置，单击对应配置项，在弹出的操作浮层中单击“重置”即可。
     图3 重置样式
     

通过状态变量动态绑定样式

在实际业务中，常需实现样式随数据变化的动态响应（如库存不足时文字变红、状态切换时组件背景变色），通过将行内样式与状态变量绑定，可快速实现这一需求。

1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击，展开“样式”设置面板。
3. 找到“行内样式”属性，单击其右侧的，弹出“变量绑定”窗口。
   图4 变量绑定
   

4. 在“变量列表”中，选择“State属性”分类下的目标属性变量，单击“确定”。

   绑定完成后，当状态变量的值发生变化时，组件的对应样式将自动同步更新，无需手动刷新或编写代码。

   图5 绑定属性变量
   

自定义CSS代码（高级）

当可视化面板无法满足复杂样式需求（如动画效果、媒体查询、伪类控制），可通过编写CSS代码实现精细化定制，支持“自定义行内样式”和“自定义全局样式”两种方式。

• 自定义行内样式：
  行内样式直接绑定到组件“style”属性，样式优先级最高，适用于需要覆盖其他样式规则的场景。

  1. 在页面设计器的中心画布区，单击选中目标组件。
  2. 在右侧设置面板中，单击，展开“样式”设置面板。
  3. 找到“行内样式”属性，单击其右侧的，弹出“编辑行内样式”窗口。
     图6 编辑行内样式
     
  4. 在弹出的窗口中，根据实际业务需求，按CSS语法编写样式，需要在“:root { }”内定义，每个属性以英文分号（;）结尾。
     图7 编写样式
     
  5. 编写完成后，单击“保存”，样式将立即作用于当前组件。
• 自定义全局样式

  全局样式适用于需要在多个组件间复用的样式规则，支持编写媒体查询、多类选择器等复杂CSS语法。

  1. 在页面设计器的中心画布区，单击选中目标组件。
  2. 在右侧设置面板中，单击，展开“样式”设置面板。
  3. 找到“全局样式”属性，单击其左侧的，弹出“Css编辑”窗口。
     图8 编辑全局样式
     
  4. 在弹出的窗口中，编写CSS样式（无“:root { }”限制），可通过“class”或者“id”绑定样式。
     

     修改全局样式时，需要注意样式类的作用范围，避免覆盖其他组件样式。

     图9 CSS编辑
     
  5. 编写完成后，单击“保存”，返回“样式”设置面板。
  6. 单击“全局样式”输入框，可自定义创建新选择器，或选择已有选择器进行绑定。
     图10 全局样式
     
• 伪类支持（仅限全局样式）

  UI引擎支持为“全局样式”选择器配置伪类，实现组件交互态的样式定制（如鼠标悬浮、聚焦、禁用等状态）。

  1. 单击“全局样式”输入框，选择目标选择器。
  2. 单击“全局样式”右侧的，从下拉列表中选择目标伪类（可选值：None/hover/focused/pressed/disabled）。
     图11 设置伪类
     
  3. 在“样式”设置面板中，当选中某个伪类并对其样式属性进行修改后，系统将自动生成“类名:伪类”的样式规则（如“.text-hover:hover”），用户可在CSS编辑器中查看完整代码。
     图12 伪类样式配置示例