[ng-alain系列]工具類規則

時間 2019-12-12

標籤 alain 系列工具規則简体版

原文原文鏈接

工具類規則

ng-alain 在 Ant Design 的基礎上生產一套尺寸、間距、顏色等工具類。css

尺寸

我認爲這些工具類只會運用在內容區域，所以，按 Ant Design 的規範，尺寸的寬度是以一個 8px Gutter 基礎間距爲基礎；並衍生出三個尺寸，分別爲：bootstrap

名稱	公式	尺寸	說明
`sm`	$gutter	8px	小號
`md`	$gutter * 2	16px	中號
`lg`	$gutter * 3	24px	大號

依這些尺寸規則，衍生出尺寸微調整的類，這些類包括 margin、padding，其命名規則以下。api

類型包括：padding、margin。安全

方向包括：top、right、bottom、left、x（left、right）、y（top、bottom）；方向爲可選。antd

消除app

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

基礎工具

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

示例：flex

.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 是固定的藍色系列，這是默認色系。code

而 ng-alain 依然不會破壞這種規則，但依色彩章節，我產生了一種運用於文本、背景的色系類。orm

色彩一共有十種，前九種依色彩爲準，以及新增一種 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號

而後依如下規則產生：

類型包括：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

別名	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-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;`