NG-YUNZAI- 文档
开始使用 国际化 定制主题 包体优化 组件样式 Icon
- 主题
全局参数 样式工具类 默认布局 空白布局 theme-btn 组件-切换样式
- 服务
_HttpClient SettingsService 项目配置项服务 MenuService 菜单服务 DrawerHelper 抽屉辅助类 ModalHelper 对话框辅助类 TitleService 页面标题服务 ResponsiveService 响应式服务 RTLService RTL服务
- 路由
PreloadOptionalModules
- 管道
_date 日期 keys 可迭代对象 safe 安全HTML等 yn 徽章
公共类
| 名称 | 默认值 | 功能 |
|---|---|---|
@layout-gutter | 8px | antd布局间距，不可改变 |
@font-size-base | 14px | antd字号 |
@primary-color | 蓝色 | antd 主色 |
@mobile-min | 768px | PC端 |
@mobile-max | 767px | 移动端 |
@text-xs | @font-size-base - 2 | xs 文本大小 |
@text-sm | @font-size-base + 0 | sm 文本大小 |
@text-md | @font-size-base + 2 | md 文本大小 |
@text-lg | @font-size-base + 4 | lg 文本大小 |
@text-xl | @font-size-base + 8 | xl 文本大小 |
@text-xxl | @font-size-base + 12 | xxl 文本大小 |
@icon-sm | @font-size-base * 2 | sm 图标 |
@icon-md | @font-size-base * 4 | md 图标 |
@icon-lg | @font-size-base * 6 | lg 图标 |
@icon-xl | @font-size-base * 8 | xl 图标 |
@icon-xxl | @font-size-base * 10 | xxl 图标 |
@h1-font-size | 32px | h1字号 |
@h2-font-size | 24px | h2字号 |
@h3-font-size | 20px | h3字号 |
@h4-font-size | 16px | h4字号 |
@h5-font-size | 14px | h5字号 |
@h6-font-size | 12px | h6字号 |
@enable-all-colors | false | 开启背景、文本颜色 例如： .bg-teal、.text-teal有关颜色值见样式规则章节 |
@modal-sm | 300px | 小号对话框 |
@modal-md | 500px | 中号对话框 |
@modal-lg | 900px | 大号对话框 |
@modal-xl | 1200px | 超大号对话框 |
@drawer-sm | 300px | 小号抽屉 |
@drawer-md | 500px | 中号抽屉 |
@drawer-lg | 900px | 大号抽屉 |
@drawer-xl | 1200px | 超大号抽屉 |
@drawer-sm-height | 200px | 小号抽屉 |
@drawer-md-height | 400px | 中号抽屉 |
@drawer-lg-height | 600px | 大号抽屉 |
@drawer-xl-height | 800px | 超大号抽屉 |
@code-border-color | #eee | <code> 边框颜色 |
@code-bg | #f7f7f7 | <code> 背景颜色 |
@widths | xs @layout-gutter * 10sm @layout-gutter * 20md @layout-gutter * 30lg @layout-gutter * 40xl @layout-gutter * 50xxl @layout-gutter * 50 | 宽度 |
@border-radius-md | 4px | 中号边框圆角 |
@border-radius-lg | 6px | 大号边框圆角 |
@masonry-column-gap | @layout-gutter * 2 | CSS瀑布流列与列的间距 |
@scrollbar-enabled | true | 启用美化滚动条 |
@scrollbar-width | 6px | 美化滚动条宽度 |
@scrollbar-height | 6px | 美化滚动条高度 |
@scrollbar-track-color | rgba(0, 0, 0, 0.3) | 美化滚动条的轨道颜色 |
@scrollbar-thumb-color | transparent | 美化滚动条小方块颜色 |
@scrollbar-table-enabled | false | 启用美化表格滚动条 |
@rtl-enabled | false | 是否支持 RTL |
@enabled-util-align | true | 是否启用工具类 align |
@enabled-util-border | true | 是否启用工具类 border |
@enabled-util-code | true | 是否启用工具类 code |
@enabled-util-color | true | 是否启用工具类 color |
@enabled-util-display | true | 是否启用工具类 display |
@enabled-util-float | true | 是否启用工具类 float |
@enabled-util-icon | true | 是否启用工具类 icon |
@enabled-util-img | true | 是否启用工具类 img |
@enabled-util-position | true | 是否启用工具类 position |
@enabled-util-overflow | true | 是否启用工具类 overflow |
@enabled-util-responsive | true | 是否启用工具类 responsive |
@enabled-util-spacing | true | 是否启用工具类 spacing |
@enabled-util-text | true | 是否启用工具类 text |
@enabled-util-width | true | 是否启用工具类 width |
@enabled-util-scrollbar | true | 是否启用工具类 scrollbar |
@enabled-util-other | true | 是否启用工具类 other |
Ng补丁
通用
| 名称 | 默认值 | 功能 |
|---|---|---|
@preserve-white-spaces-enabled | true | 解决开启 preserveWhitespaces 时按钮间可能会出现无缝 |
@preserve-sf-and-st-spaces | 16px | sf 与 st 间间距 |
@preserve-buttons-spaces | 按钮间间距（包括：button、button-group、popconfirm） | |
@router-animation-enabled | false | 是否启用路由切换动画 |
@router-animation-duration | antFadeIn | 路由切换动画 |
@router-animation-duration | 1s | 路由切换动画时长 |
Zorro组件补丁
通用
| 名称 | 默认值 | 功能 |
|---|---|---|
@forced-turn-off-nz-modal-animation-enabled | false | 强制关闭 nz-modal 动画效果 |
表单
| 名称 | 默认值 | 功能 |
|---|---|---|
@form-state-visual-feedback-enabled | false | 开启表单元素的视觉反馈 |
@search-form-bg | #fbfbfb | 列表页简易搜索表单背景色 |
@search-form-radius | 4px | 列表页简易搜索表单圆角 |
表格
指 nz-table。
| 名称 | 默认值 | 功能 |
|---|---|---|
@nz-table-img-radius | 4px | 表格中的图片圆角 |
@nz-table-img-margin-right | 4px | 表格中的图片右外边距 |
@nz-table-img-max-width | 32px | 表格中的图片最大宽度 |
@nz-table-img-max-height | 32px | 表格中的图片最大高度 |
@nz-table-even-background | none | 奇偶背景 |
@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-vertical | 8px | 表格响应式：单元格垂直间距 |
@nz-table-rep-padding-horizontal | 8px | 表格响应式：单元格水平间距 |
@nz-table-rep-column-name-width | 100px | 表格响应式：列名最大宽度 |
@nz-table-rep-column-name-text-align | right | 表格响应式：列名文本对齐方式 |
@nz-table-rep-column-name-padding-right | right | 表格响应式：列名右间距 |
@nz-table-rep-column-name-color | rgba(0, 0, 0, 0.5) | 表格响应式：列名颜色 |
小部件
| 名称 | 默认值 | 功能 |
|---|---|---|
@hafl-enabled | true | 半图 |
@abs-enabled | true | 中心元素 |
@masonry-enabled | true | CSS瀑布流列 |
@setting-drawer-enabled | true | 主题设置 |
@search__form-enabled | true | Pro搜索框，DEMO |