样式工具类

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

在 VSCode 安装 ng-alain snippets 插件，可以对所有工具集样式名称的智能提醒。

间距

ng-alain 认为这些工具类只会运用在内容区域，且秉承 Ant Design 的设计价值观，间距宽度是以 8px 为一个基准单位，并衍生出三个尺寸，分别为：

依这些规则，衍生出 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。

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

Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。

分类

命名格式

[<类型>text|bg]-[<色彩名>red|volcano|orange|gold|yellow|lime|green|cyan|blue|geekblue|purple|magenta|grey](-[light|dark])?(-h)?

normal 本身即是基本色，所以可以被忽略 grey 可能会更常用，所以额外增加 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; } }

别名

示例：

// 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; } }

全量颜色

你可以使用 @enable-all-colors: true 来开启所有 120 个颜色的规则。

.text-red-1 { color: #fff1f0 !important; }
.text-red-6 { color: #f04134 !important; }
.text-red-10 { color: #5c0011 !important; }

.bg-red-6 { color: #f04134 !important; }
.bg-red-6-h { color: #f04134 !important; }

清除浮动

清除浮动 .clearfix。

显示

位置

文本

大小

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

对齐

溢出

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

Transformation

Weightanditalics

Other

Borders

边框

颜色

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

圆角

Width

Responsive

类似 Bootstrap 响应式规则，当屏幕小于 480px 时会隐藏所有 hidden-xs 类。

旋转

.rotate-[360 / 15]

例如：

// 旋转15度
.rotate-15
// 旋转90度
.rotate-90
// 旋转360度
.rotate-360

Other

小部件

瀑布流

在线示例。

ng-zorro

nz-card

nz-modal

nz-table

nz-tag