全局参数

公共类

名称默认值功能
@layout-gutter8pxantd布局间距,不可改变
@font-size-base14pxantd字号
@primary-color蓝色antd 主色
@mobile-min768pxPC端
@mobile-max767px移动端
@text-xs@font-size-base - 2xs 文本大小
@text-sm@font-size-base + 0sm 文本大小
@text-md@font-size-base + 2md 文本大小
@text-lg@font-size-base + 4lg 文本大小
@text-xl@font-size-base + 8xl 文本大小
@text-xxl@font-size-base + 12xxl 文本大小
@icon-sm@font-size-base * 2sm 图标
@icon-md@font-size-base * 4md 图标
@icon-lg@font-size-base * 6lg 图标
@icon-xl@font-size-base * 8xl 图标
@icon-xxl@font-size-base * 10xxl 图标
@h1-font-size32pxh1字号
@h2-font-size24pxh2字号
@h3-font-size20pxh3字号
@h4-font-size16pxh4字号
@h5-font-size14pxh5字号
@h6-font-size12pxh6字号
@enable-all-colorsfalse开启背景、文本颜色
例如:.bg-teal.text-teal
有关颜色值见样式规则章节
@modal-sm300px小号对话框
@modal-md500px中号对话框
@modal-lg900px大号对话框
@modal-xl1200px超大号对话框
@drawer-sm300px小号抽屉
@drawer-md500px中号抽屉
@drawer-lg900px大号抽屉
@drawer-xl1200px超大号抽屉
@drawer-sm-height200px小号抽屉
@drawer-md-height400px中号抽屉
@drawer-lg-height600px大号抽屉
@drawer-xl-height800px超大号抽屉
@code-border-color#eee<code> 边框颜色
@code-bg#f7f7f7<code> 背景颜色
@widthsxs @layout-gutter * 10
sm @layout-gutter * 20
md @layout-gutter * 30
lg @layout-gutter * 40
xl @layout-gutter * 50
xxl @layout-gutter * 50
宽度
@border-radius-md4px中号边框圆角
@border-radius-lg6px大号边框圆角
@masonry-column-gap@layout-gutter * 2CSS瀑布流列与列的间距
@scrollbar-enabledtrue启用美化滚动条
@scrollbar-width6px美化滚动条宽度
@scrollbar-height6px美化滚动条高度
@scrollbar-track-colorrgba(0, 0, 0, 0.3)美化滚动条的轨道颜色
@scrollbar-thumb-color#6e6e6e美化滚动条小方块颜色
@scrollbar-table-enabledfalse启用美化表格滚动条
@rtl-enabledfalse是否支持 RTL
@enabled-util-aligntrue是否启用工具类 align
@enabled-util-bordertrue是否启用工具类 border
@enabled-util-codetrue是否启用工具类 code
@enabled-util-colortrue是否启用工具类 color
@enabled-util-displaytrue是否启用工具类 display
@enabled-util-floattrue是否启用工具类 float
@enabled-util-icontrue是否启用工具类 icon
@enabled-util-imgtrue是否启用工具类 img
@enabled-util-positiontrue是否启用工具类 position
@enabled-util-overflowtrue是否启用工具类 overflow
@enabled-util-responsivetrue是否启用工具类 responsive
@enabled-util-spacingtrue是否启用工具类 spacing
@enabled-util-texttrue是否启用工具类 text
@enabled-util-widthtrue是否启用工具类 width
@enabled-util-scrollbartrue是否启用工具类 scrollbar
@enabled-util-othertrue是否启用工具类 other

Ng补丁

通用

名称默认值功能
@preserve-white-spaces-enabledtrue解决开启 preserveWhitespaces 时按钮间可能会出现无缝
@preserve-sf-and-st-spaces16pxsfst 间间距
@preserve-buttons-spaces按钮间间距(包括:button、button-group、popconfirm)
@router-animation-enabledfalse是否启用路由切换动画
@router-animation-durationantFadeIn路由切换动画
@router-animation-duration1s路由切换动画时长

Zorro组件补丁

通用

名称默认值功能
@forced-turn-off-nz-modal-animation-enabledfalse强制关闭 nz-modal 动画效果

表单

名称默认值功能
@form-state-visual-feedback-enabledfalse开启表单元素的视觉反馈
@search-form-bg#fbfbfb列表页简易搜索表单背景色
@search-form-radius4px列表页简易搜索表单圆角

表格

nz-table

名称默认值功能
@nz-table-img-radius4px表格中的图片圆角
@nz-table-img-margin-right4px表格中的图片右外边距
@nz-table-img-max-width32px表格中的图片最大宽度
@nz-table-img-max-height32px表格中的图片最大高度
@nz-table-even-backgroundnone奇偶背景
@nz-table-rep-max-width@mobile-max当移动端屏幕时触发表格响应式
@nz-table-rep-header-background@border-color-split表格响应式:标题背景色
@nz-table-rep-even-background#f9f9f9表格响应式:偶数行背景色
@nz-table-rep-padding-vertical8px表格响应式:单元格垂直间距
@nz-table-rep-padding-horizontal8px表格响应式:单元格水平间距
@nz-table-rep-column-name-width100px表格响应式:列名最大宽度
@nz-table-rep-column-name-text-alignright表格响应式:列名文本对齐方式
@nz-table-rep-column-name-padding-rightright表格响应式:列名右间距
@nz-table-rep-column-name-colorrgba(0, 0, 0, 0.5)表格响应式:列名颜色

小部件

名称默认值功能
@hafl-enabledtrue半图
@abs-enabledtrue中心元素
@masonry-enabledtrueCSS瀑布流列
@setting-drawer-enabledtrue主题设置
@search__form-enabledtruePro搜索框,DEMO