Skip to content

样式配置

样式配置用于调整单个组件的外观:尺寸、边距、颜色、边框、字体、阴影等。也可挂上全局样式中的类,兼顾统一与个性。

样式配置面板

在哪里找

选中组件 → 属性栏 → 样式配置

和表单样式、全局样式的分工

层级优先做什么
表单配置整表标签位置、尺寸默认
全局样式多处复用的按钮色、标题强调
组件样式(本文)单个字段的圆角、背景、间距微调

全局样式

常见可配项

类别示例
尺寸宽、高、最小/最大宽高
间距外边距、内边距
颜色与背景文字色、背景色
边框线型、粗细、圆角
文字字号、字体、对齐、行高
效果阴影、透明度、缩放等
布局显示方式、弹性排列(若组件支持)
扩展自定义 CSS(界面提供时)、全局 class

字段占多宽也可在基础配置的「组件宽度」调整;复杂多列用布局组件

全局样式

怎么配置(分步)

  1. 先确认整表默认与是否已有可用全局样式。
  2. 选中组件 → 打开样式配置。
  3. 需要统一外观时,先挂全局 class;再改本组件独有项。
  4. 预览在 PC / 窄屏下看真实渲染。

业务示例

入门:突出「提交」按钮

加大字号、品牌主色背景、适当圆角。预览确认在手机宽度下仍易点。若多处提交按钮一致,做成全局 btn-primary 再引用。

入门:说明文字弱化

辅助说明用较小字号、次要文字色,避免和输入标题抢视线。

常用:只读字段弱化

详情页把只读输入框背景调为浅灰、减弱边框;公共弱化样式沉淀为全局类,录入页不挂该类。

常用:金额右对齐

金额、数量类字段文字右对齐,列表感更强;可与表单「内容对齐」默认配合。

常用:危险操作区提醒

删除确认旁的提示条:浅底 + 左边框强调色;按钮挂 btn-danger 全局样式。

使用建议

  • 先定表单级与全局样式,再对个别字段微调。
  • 避免每个字段颜色都不同,保持信息层级清晰。
  • 改样式后用预览看真实渲染,设计态与预览可能略有差异。
  • 能用布局/宽度解决的排版问题,少用绝对定位类技巧。

相关阅读

相关技术文档