样式工具类

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

Weight and italics

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

基础样例

小屏幕查看效果。

import { Component } from '@angular/core';
@Component({
  selector: 'theme-tools-table-rep',
  template: `
  <nz-table #basicTable [nzData]="dataSet"
    nzTitle="This is title" class="ant-table-rep__hide-header-footer">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>
          <span class="ant-table-rep__title">Name</span>
          {{data.name}}
        </td>
        <td>
          <span class="ant-table-rep__title">Age</span>
          {{data.age}}
        </td>
        <td>
          <span class="ant-table-rep__title">Address</span>
          {{data.address}}
        </td>
      </tr>
    </tbody>
  </nz-table>
  `,
})
export class ThemeTableRepComponent {
  dataSet = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
  ];
}

nz-tag