[ng-alain系列]工具类规则

最新推荐文章于 2025-03-18 18:01:29 发布

转载最新推荐文章于 2025-03-18 18:01:29 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000010807951

ng-alain 专栏收录该内容

10 篇文章

订阅专栏

工具类规则

ng-alain 在 Ant Design 的基础上生产一套尺寸、间距、颜色等工具类。

尺寸

我认为这些工具类只会运用在内容区域，因此，按 Ant Design 的规范，尺寸的宽度是以一个 8px Gutter 基础间距为基础；并衍生出三个尺寸，分别为：

名称公式尺寸说明sm $g u t t e r 8 p x 小号 ‘ m d ‘$ gutter * 216px中号lg$gutter * 324px大号

依这些尺寸规则，衍生出尺寸微调整的类，这些类包括 margin、padding，其命名规则如下。

类型包括：padding、margin。

方向包括：top、right、bottom、left、x（left、right）、y（top、bottom）；方向为可选。

消除

[<类型>p|m][<方向>t|r|b|l|x|y]?0

基础

[<类型>p|m][<方向>t|r|b|l|x|y]?-[<尺寸>sm|md|lg]

示例：

.p-sm { padding: 8px!important; }
.pt-sm { padding-top: 8px!important; }
.m-sm { margin: 16px!important; }
.mt-md { margin-top: 16px!important; }

.p0 { padding: 0!important; }

色彩

Ant Design 并没有按钮色这一说，而是以视觉效果为基准。nz-button 包括四种类型：primary、dashed 等。但 primary 是固定的蓝色系列，这是默认色系。

而 ng-alain 依然不会破坏这种规则，但依色彩章节，我产生了一种运用于文本、背景的色系类。

色彩一共有十种，前九种依色彩为准，以及新增一种 teal【#20c997】 （别问我为什么，我就喜欢偶数而已），分别如下：

名称基本色说明red``#f04134热情、警示green``#00a854成功、通过、安全blue``#108ee9专业、科技pink``#f5317f典雅、明快、女性orange``#f56a00醒目、温暖purple``#7265e6高雅、浪漫yellow``#ffbf00活力、提示cyan``#00a2ae清新、冷静、结构化grey``#bfbfbf平稳、中性teal``#20c997

这些色彩会衍生出 10 种渐变色，然而每一种渐变色要想产生一个有效的命名（10 * 10）非常困难。因此，我只衍生三种颜色规则，分别为：

名称色号light5号normal6号dark7号

然后依以下规则产生：

类型包括：text、background-color、background-color:hover。

[<类型>text|bg]-[<色彩名>red|green|blue|pink|orange|purple|yellow|cyan|teal|grey](-[light|dark])?(-h)?

normal 本身即是基本色，所以实际无须加上 normal

grey 可能会更常用，因此，除了 grey-light、grey-dark 额外增加了 grey-lighter、grey-darker 表示更浅深度。

示例：

// Text color.text-red-light { color: #fabeb9!important; }
.text-red { color: #f04134!important; }
.text-red-dark { color: #a31837!important; }

// background-color color.bg-red-light { background-color: #fabeb9!important; }
.bg-red { background-color: #f04134!important; }
.bg-red-dark { background-color: #a31837!important; }

// hover color.bg-red-light-h { &:hover { background-color: #fabeb9!important; } }
.bg-red-h { &:hover { background-color: #f04134!important; } }
.bg-red-dark-h { &:hover { background-color: #a31837!important; } }

别名

实际上 Ant Design 提供一套类似 bootstrap 的命名方式的别名规则。只是，我们无法使用到这里内置的而已，这些别名包括：

别名色系primary``blue``success``green``error``red``warning``yellow

进而，我将取转化成文本与背景，其命名规则同上面一样，只是将色彩名变成为别名而已。

示例：

// Text color.text-error-light { color: #fabeb9!important; }
.text-error { color: #f04134!important; }
.text-error-dark { color: #a31837!important; }

// background-color color.bg-error-light { background-color: #fabeb9!important; }
.bg-error { background-color: #f04134!important; }
.bg-error-dark { background-color: #a31837!important; }

// hover color.bg-error-light-h { &:hover { background-color: #fabeb9!important; } }
.bg-error-h { &:hover { background-color: #f04134!important; } }
.bg-error-dark-h { &:hover { background-color: #a31837!important; } }

Clearfix

ng-zoroo-antd 自带清除浮动 .clearfix。

Display

别名CSSd-none``display: none``d-block``display: block``d-inline-block``display: inline-block``d-flex``display: flex``d-inline-flex``display: inline-flex

Float

名称说明fixed-top顶部fixed-bottom底部

Text

Sizing

Ant Design 是以 12px 为基准字号。

名称说明text-sm``12px``text-md``24px``text-lg``36px

Alignment

名称说明text-left文本居左text-center文本居中text-right文本居右

Wrapping

**容器必须是 display: inline-block 或 display: block。

名称说明text-nowrap文本超出不换行text-truncate文本超出截取并加 ...

Transformation

名称说明text-lowercase小写文本text-uppercase大写文本text-capitalize首词大写text-deleted删除线

Weight and italics

名称说明font-weight-normal``font-weight: normal``font-weight-bold``font-weight: 700``font-italic``font-style: italic

Borders

边框

名称说明border``border: 1px solid #f5f5f5 !important;``border-0``border: 0 !important;``border-top-0``border-top: 0 !important;``border-right-0``border-right: 0 !important;``border-bottom-0``border-bottom: 0 !important;``border-left-0``border-left: 0 !important;

颜色

支持色彩章节所有的色系&别名写法，例如：border-red、border-success。

圆角

名称说明rounded-0``border-radius: 0;``rounded-circle``border-radius: 50%;``rounded-sm``border-radius: 2px;``rounded-md``border-radius: 4px;``rounded-lg``border-radius: 6px;