Skip to content

全局样式

全局样式用于定义可复用的样式类(Class)与公共视觉规范。组件在样式配置中选择这些类,即可快速套用统一外观。

全局样式管理

在哪里找

全局配置全局样式

也可在组件样式配置中通过「全局样式」选择入口快捷打开管理界面。

和表单样式、组件样式的分工

层级管什么
表单配置整表默认标签位置、尺寸等
全局样式(本文)可复用的视觉 class(主色按钮、危险操作、强调标题)
组件样式单个字段的个性微调

原则:全局管共性,组件管个性。

怎么用(分步)

  1. 新建样式,填写名称与描述(如 btn-danger「危险操作按钮」)。
  2. 配置颜色、字号、边距、边框等(或按界面提供的方式编辑)。
  3. 保存后,在目标组件的样式配置中勾选该全局样式。
  4. 预览检查;需要局部微调时再叠加组件自身样式。

全局样式管理

业务示例

入门:统一「危险操作」按钮红色

创建 btn-danger → 删除、作废类按钮都选用。品牌色调整时只改一处。

入门:强调标题

创建 title-strong(字号加大、字重加粗)→ 分组标题、卡片标题选用,阅读层级更清晰。

常用:只读详情的标签样式

为详情页字段统一标签字重与颜色;新建表单时直接套用,保证后台多页视觉一致。

常用:主色 CTA + 次要按钮

btn-primary 用于提交/下一步;btn-ghost 用于「返回」「取消」。整站按钮层级统一。

命名建议

建议示例
见名知意btn-primarytext-mutedcard-warning
按用途而非颜色优先 btn-danger,少用 red-btn(换肤时更好改)
写描述方便他人在列表中选用

注意点

  • 改全局样式会影响所有引用处,发布前预览主路径。
  • 避免把每个字段的一次性微调都做成全局类。
  • 设计态与预览渲染可能略有差异,以预览为准。

相关阅读

相关技术文档