字段元素样式

可键入内置的全局原子样式，并将其组合形成定制的样式

内置原子样式

外边距

格式：[lcp-margin]-[方向|距离]-[距离]

lcp-margin作为统一样式类名前缀。

方向有top、bottom、left、right，如果不跟随四个方向则为四个方向同时增加外边距。

距离最大为64px。

示例

lcp-margin-top-23：向上外边距为23px

lcp-margin-3：向上、下、左、右外边距均为3px

lcp-margin-65：距离超过最大边距64px，该样式不生效

内边距

格式：[lcp-padding]-[方向|距离]-[距离]

lcp-padding作为统一样式类名前缀。

方向有top、bottom、left、right，如果不跟随四个方向则为四个方向同时增加内边距。

距离最大为64px。

示例

lcp-padding-top-23：向上内边距为23px

lcp-padding-3：向上、下、左、右内边距均为3px

lcp-padding-65：距离超过最大边距64px，该样式不生效

阴影

格式：[lcp-shadow]-[轴向|距离]-[反转|距离]-[距离]

lcp-shadow作为统一样式类名前缀。

轴向有x、y，如果不跟随两个轴向则为两个轴向同时增加阴影。

反转为reverse，可对轴向上的阴影反向进行设置

距离最大为5px。

阴影扩散程度默认为3px，且不可设置。

示例

lcp-shadow-3：x和y两个轴正向的阴影均为3px，即阴影向右和向下偏移3px

lcp-shadow-x-1：x轴正向的阴影为1px，即阴影向右偏移1px

lcp-shadow-x-reverse-1：x轴负向的阴影为-1px，即阴影向左偏移1px

lcp-shadow-y-2：y轴正向的阴影为2px，即阴影向下偏移2px

lcp-shadow-6：距离超过最大边距5px，该样式不生效

背景颜色

格式：[lcp-bg]-[颜色]

lcp-bg作为统一样式类名前缀。

颜色有transparent、white、dark、primary（info）、success、warning（warn）、danger（error）、 disabled。

示例

lcp-bg-transparent：区域背景颜色为透明色

lcp-bg-white：区域背景颜色为白色

lcp-bg-dark：区域背景颜色为黑色

lcp-bg-primary、lcp-bg-info：区域背景颜色为蓝色

lcp-bg-success：区域背景颜色为绿色

lcp-bg-warning、lcp-bg-warn：区域背景颜色为橙色

lcp-bg-danger、lcp-bg-error：区域背景颜色为红色

lcp-bg-disabled：区域背景颜色为灰色

lcp-bg-yellow：该颜色不存在，该样式不生效

边框线条颜色

格式：[lcp-border-color]-[颜色]

lcp-border-color作为统一样式类名前缀。

颜色有transparent、white、dark、primary（info）、success、warning（warn）、danger（error）、 disabled。

示例

lcp-border-color-transparent：区域背景颜色为透明色

lcp-border-color-white：区域背景颜色为白色

lcp-border-color-dark：区域背景颜色为黑色

lcp-border-color-primary、lcp-bg-info：区域背景颜色为蓝色

lcp-border-color-success：区域背景颜色为绿色

lcp-border-color-warning、lcp-bg-warn：区域背景颜色为橙色

lcp-border-color-danger、lcp-bg-error：区域背景颜色为红色

lcp-border-color-disabled：区域背景颜色为灰色

lcp-border-color-yellow：该颜色不存在，该样式不生效

布局排版

格式：[lcp-block]

lcp-block为占据整行。

示例

lcp-block：元素/区域占据整行

边界圆角

格式：[lcp-border-radius]-[百分比|进深]-[进深]

lcp-border-radius作为统一样式类名前缀。

百分比有per，百分比场景下每次递增为10%，如果无百分比前缀，则默认使用px单位。

进深最大为10px或100%。

示例

lcp-border-radius-0：取消边界圆角样式，按矩形正常展示

lcp-border-radius-per-10：四个方向圆角为10%

lcp-border-radius-3：四个方向圆角为3px

lcp-border-radius-per-13：由于百分比状态下，递增为10%，所以13%不属于该递增节点，则不生效