[ng-alain系列]工具类规则
工具类规则
尺寸我认为这些工具类只会运用在内容区域,因此,按 Ant Design 的规范,尺寸的宽度是以一个
依这些尺寸规则,衍生出尺寸微调整的类,这些类包括 类型包括: 方向包括: 消除 [<类型>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 并没有按钮色这一说,而是以视觉效果为基准。 而 色彩一共有十种,前九种依色彩为准,以及新增一种
这些色彩会衍生出 10 种渐变色,然而每一种渐变色要想产生一个有效的命名(10 * 10)非常困难。因此,我只衍生三种颜色规则,分别为:
然后依以下规则产生: 类型包括: [<类型>text|bg]-[<色彩名>red|green|blue|pink|orange|purple|yellow|cyan|teal|grey](-[light|dark])?(-h)?
示例: // 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 的命名方式的别名规则。只是,我们无法使用到这里内置的而已,这些别名包括:
进而,我将取转化成文本与背景,其命名规则同上面一样,只是将色彩名变成为别名而已。 示例: // 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
Display
Float
TextSizingAnt Design 是以
Alignment
Wrapping**容器必须是
Transformation
Weight and italics
Borders边框
颜色支持色彩章节所有的色系&别名写法,例如: 圆角
Width
Responsive类似 Bootstrap 响应式规则,当屏幕小于
Other
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |