样式工具类

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

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

间距

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

名称公式尺寸说明
xs$gutter / 24px超小号
sm$gutter8px小号
md$gutter * 216px中号
lg$gutter * 324px大号
xl$gutter * 432px特大号
xxl$gutter * 648px超大号

依这些规则,衍生出 marginpadding,其命名规则如下:

  • 类型:paddingmargin

  • 方向(可选):toprightbottomleftx(相当于 leftright)、y(相当于 topbottom

消除

[<类型>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 依然不会破坏这种规则,但依 色彩 章节,产生了一种运用于文本、背景的色系类。

名称基本色说明
red
#f5222d
薄暮:斗志、奔放
volcano
#fa541c
火山:醒目、澎湃
orange
#fa8c16
日暮:温暖、欢快
gold
#faad14
金盏花:活力、积极
yellow
#fadb14
日出:出生、阳光
lime
#a0d911
青柠:自然、生机
green
#f5222d
极光绿:健康、创新
cyan
#13c2c2
明青:希望、坚强
blue
#1890ff
拂晓蓝:包容、科技、普惠
geekblue
#2f54eb
极客蓝:探索、钻研
purple
#722ed1
酱紫:优雅、浪漫
magenta
#eb2f96
法式洋红:平稳、中性

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

分类

名称色号
light5号
normal6号
dark7号

命名格式

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

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

别名

别名色系
primary@blue-6
#1890ff
success@green-6
#52c41a
error@red-5
#ff4d4f
warning@gold-6
#faad14
info@blue-6
#1890ff
processing@blue-6
#1890ff
highlight@red-5
#ff4d4f
normal#d9d9d9
#d9d9d9

示例:

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

显示

别名CSS
d-nonedisplay: none
d-blockdisplay: block
d-inline-blockdisplay: inline-block
d-flexdisplay: flex
d-inline-flexdisplay: inline-flex
justify-content-startjustify-content: flex-start
justify-content-endjustify-content: flex-end
justify-content-centerjustify-content: center
justify-content-betweenjustify-content: space-between
justify-content-aroundjustify-content: space-around
align-items-startalign-items: flex-start
align-items-endalign-items: flex-end
align-items-centeralign-items: center
align-items-baselinealign-items: baseline
align-items-stretchalign-items: stretch
align-content-startalign-content: flex-start
align-content-endalign-content: flex-end
align-content-centeralign-content: center
align-content-betweenalign-content: space-between
align-content-aroundalign-content: space-around
align-content-stretchalign-content: stretch
align-self-autoalign-self: auto
align-self-startalign-self: flex-start
align-self-endalign-self: flex-end
align-self-centeralign-self: center
align-self-baselinealign-self: baseline
align-self-stretchalign-self: stretch
flex-centerdisplay: flex; align-items: center;
flex-center-betweendisplay: flex; align-items: center; align-content: space-between;

位置

名称说明
overflow-autooverflow: auto
overflow-hiddenoverflow: hidden
fixed-top固定顶部
fixed-bottom固定底部

文本

大小

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

名称说明
text-xs12px
text-sm14px
text-md16px
text-lg18px
text-xl22px

对齐

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

溢出

容器必须是 display: inline-blockdisplay: block

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

Transformation

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

Weight and italics

名称说明
font-weight-normalfont-weight: normal
font-weight-boldfont-weight: 700
font-italicfont-style: italic

Other

名称说明
text-hover*:hover { color: @primary-color; }
disabled禁止

Borders

边框

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

颜色

支持色彩章节所有的色系&别名写法,例如:border-redborder-success

圆角

名称说明
rounded-0border-radius: 0;
rounded-circleborder-radius: 50%;
rounded-smborder-radius: 2px;
rounded-mdborder-radius: 4px;
rounded-lgborder-radius: 6px;

Width

名称说明
width-sm160px
width-md240px
width-lg320px
width-[0-10]0%-100%

Responsive

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

名称屏幕
hidden-xs<480px
hidden-sm<768px
hidden-md<992px
hidden-lg<1200px
hidden-pc<768px
hidden-mobile>768px

旋转

.rotate-[360 / 15]

例如:

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

Other

名称说明
block-centermargin: 0 auto
pointcursor: pointer
no-data空数据行
no-resize设置不允许调整元素
bg-center背景图垂直居中
scrollbar美化 div 滚动条
color-weak色弱模式

小部件

瀑布流

在线示例

名称说明
row-masonry
row-masonry-{xs|sm|md|lg|xl}-{1-10}列,响应式样式
col-masonry

ng-zorro

nz-card

名称说明
ant-card__body-nopadding强制内容无间距

nz-modal

名称说明
modal-{sm|md|lg|xl}设置Modal的大小,wrapClassName: 'modal-lg'
modal-body-nopadding内容无内边距
modal-header自定义Modal时非常有效,DEMO
modal-footer自定义Modal时非常有效,DEMO

nz-table

名称说明
ant-table-rep__title标题
ant-table-rep__hide-header-footer小屏幕时才显示标题或底部

nz-tag

名称说明
ant-tag__plus增加按钮样式