CSS 工具类

Clair 提供了一些 CSS 工具类,让你方便地修改元素样式。这些 CSS 类一般以 .is-.has- 开头。

文本类

文字的颜色和背景颜色,可以参考 颜色。字体大小、行高和对齐方式,请参考 文本样式

留白设置

你可以使用 CSS 工具类设置一个元素的 marginpadding 的值。在 Clair 中,有 6 种规格的留白:

规格 none xs sm md lg xl
实际尺寸 0 4px 8px 16px 32px 64px

在使用时,.has-margin-sm 表示 margin: 8px;而 .has-padding-left-none 表示 padding-left: 0,以此类推。

display 设置

通过 CSS 工具类快捷地设置元素的 display 属性。比如 .is-block 表示 display: block

CSS 类 具体样式
.is-none display: none
.is-block display: block
.is-inline-block display: inline-block
.is-flex display: flex
.is-inline display: inline