2

工具类规则

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

尺寸

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

名称 公式 尺寸 说明
sm $gutter 8px 小号
md $gutter * 2 16px 中号
lg $gutter * 3 24px 大号

依这些尺寸规则,衍生出尺寸微调整的类,这些类包括 marginpadding,其命名规则如下。

类型包括:paddingmargin

方向包括:toprightbottomleftxleftright)、ytopbottom);方向为可选。

消除

[<类型>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 包括四种类型:primarydashed 等。但 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)非常困难。因此,我只衍生三种颜色规则,分别为:

名称 色号
light 5号
normal 6号
dark 7号

然后依以下规则产生:

类型包括:textbackground-colorbackground-color:hover

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

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

grey 可能会更常用,因此,除了 grey-lightgrey-dark 额外增加了 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; } }

别名

实际上 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

别名 CSS
d-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-blockdisplay: 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-redborder-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;

Width

名称 说明
width-sm 160px
width-md 240px
width-lg 320px

Responsive

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

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

Other

名称 说明
block-center margin: 0 auto
point cursor: pointer
no-resize 设置不允许调整元素

cipchk
6.7k 声望605 粉丝

一个会独立思考的高级动物。


引用和评论

0 条评论