diff --git a/components/affix/doc/index.en-US.md b/components/affix/doc/index.en-US.md index afe2baed7b4..4bb0238012b 100755 --- a/components/affix/doc/index.en-US.md +++ b/components/affix/doc/index.en-US.md @@ -24,10 +24,10 @@ import { NzAffixModule } from 'ng-zorro-antd/affix'; ### nz-affix -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzOffsetBottom]` | Pixels to offset from bottom when calculating position of scroll | `number` | - | -| `[nzOffsetTop]` | Pixels to offset from top when calculating position of scroll | `number` | `0` | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | +| `[nzOffsetBottom]` | Pixels to offset from bottom when calculating position of scroll | `number` | - | ✅ | +| `[nzOffsetTop]` | Pixels to offset from top when calculating position of scroll | `number` | `0` | ✅ | | `[nzTarget]` | specifies the scrollable area dom node | `string \| HTMLElement` | `window` | | `(nzChange)` | Callback for when affix state is changed | `EventEmitter` | - | diff --git a/components/affix/doc/index.zh-CN.md b/components/affix/doc/index.zh-CN.md index 7697f9bdb2b..d0ec781c30c 100755 --- a/components/affix/doc/index.zh-CN.md +++ b/components/affix/doc/index.zh-CN.md @@ -26,10 +26,10 @@ import { NzAffixModule } from 'ng-zorro-antd/affix'; ### nz-affix -| 成员 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[nzOffsetBottom]` | 距离窗口底部达到指定偏移量后触发 | `number` | - | -| `[nzOffsetTop]` | 距离窗口顶部达到指定偏移量后触发 | `number` | `0` | +| 成员 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | +| `[nzOffsetBottom]` | 距离窗口底部达到指定偏移量后触发 | `number` | - | ✅ | +| `[nzOffsetTop]` | 距离窗口顶部达到指定偏移量后触发 | `number` | `0` | ✅ | | `[nzTarget]` | 设置 `nz-affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | `string \| HTMLElement` | `window` | | `(nzChange)` | 固定状态改变时触发的回调函数 | `EventEmitter` | - | diff --git a/components/affix/nz-affix.component.ts b/components/affix/nz-affix.component.ts index 63864c3d428..d5954772a81 100644 --- a/components/affix/nz-affix.component.ts +++ b/components/affix/nz-affix.component.ts @@ -24,10 +24,18 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { shallowEqual, toNumber, NgStyleInterface, NzScrollService } from 'ng-zorro-antd/core'; import { fromEvent, merge, Subscription } from 'rxjs'; import { auditTime } from 'rxjs/operators'; +import { + shallowEqual, + toNumber, + NgStyleInterface, + NzConfigService, + NzScrollService, + WithConfig +} from 'ng-zorro-antd/core'; + export const NZ_AFFIX_DEFAULT_SCROLL_TIME = 20; @Component({ @@ -46,8 +54,35 @@ export const NZ_AFFIX_DEFAULT_SCROLL_TIME = 20; }) export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy { @Input() nzTarget: string | Element | Window; - @Input() nzOffsetTop: number | null; - @Input() nzOffsetBottom: number | null; + + @Input() + @WithConfig() + set nzOffsetTop(value: number | null) { + if (value === undefined || value === null) { + return; + } + this._offsetTop = toNumber(value, null); + this.updatePosition({} as Event); + } + + get nzOffsetTop(): number | null { + return this._offsetTop; + } + + private _offsetTop: number | null; + + @Input() + @WithConfig() + set nzOffsetBottom(value: number) { + if (typeof value === 'undefined') { + return; + } + this._offsetBottom = toNumber(value, null); + this.updatePosition({} as Event); + } + + private _offsetBottom: number | null; + @Output() readonly nzChange = new EventEmitter(); @ViewChild('fixedEl', { static: true }) private fixedEl: ElementRef; @@ -57,8 +92,6 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy { private readonly placeholderNode: HTMLElement; private affixStyle: NgStyleInterface | undefined; private placeholderStyle: NgStyleInterface | undefined; - private _offsetTop: number | null; - private _offsetBottom: number | null; private get target(): Element | Window { const el = this.nzTarget; @@ -67,6 +100,7 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy { constructor( _el: ElementRef, + public nzConfigService: NzConfigService, private scrollSrv: NzScrollService, // tslint:disable-next-line:no-any @Inject(DOCUMENT) private doc: any, diff --git a/components/alert/doc/index.en-US.md b/components/alert/doc/index.en-US.md index ce44427e375..60a3ccd9af2 100644 --- a/components/alert/doc/index.en-US.md +++ b/components/alert/doc/index.en-US.md @@ -23,14 +23,14 @@ import { NzAlertModule } from 'ng-zorro-antd/alert'; ### nz-alert -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzBanner]` | Whether to show as banner | `boolean` | `false` | -| `[nzCloseable]` | Whether Alert can be closed | `boolean` | - | +| `[nzCloseable]` | Whether Alert can be closed | `boolean` | - | ✅ | | `[nzCloseText]` | Close text to show | `string \| TemplateRef` | - | | `[nzDescription]` | Additional content of Alert | `string \| TemplateRef` | - | | `[nzMessage]` | Content of Alert | `string \| TemplateRef` | - | -| `[nzShowIcon]` | Whether to show icon, in `nzBanner` mode default is `true` | `boolean` | `false` | +| `[nzShowIcon]` | Whether to show icon, in `nzBanner` mode default is `true` | `boolean` | `false` | ✅ | | `[nzIconType]` | Icon type, effective when `nzShowIcon` is `true` | `string \| string[] \| Set \| { [klass: string]: any; }` | - | | `[nzType]` | Type of Alert styles, in `nzBanner` mode default is `'warning'` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | | `(nzOnClose)` | Callback when Alert is closed | `EventEmitter` | - | diff --git a/components/alert/doc/index.zh-CN.md b/components/alert/doc/index.zh-CN.md index 613ef85740a..ff39acefde0 100644 --- a/components/alert/doc/index.zh-CN.md +++ b/components/alert/doc/index.zh-CN.md @@ -24,14 +24,14 @@ import { NzAlertModule } from 'ng-zorro-antd/alert'; ### nz-alert -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzBanner]` | 是否用作顶部公告 | `boolean` | `false` | -| `[nzCloseable]` | 默认不显示关闭按钮 | `boolean` | - | +| `[nzCloseable]` | 默认不显示关闭按钮 | `boolean` | - | ✅ | | `[nzCloseText]` | 自定义关闭按钮 | `string \| TemplateRef` | - | | `[nzDescription]` | 警告提示的辅助性文字介绍 | `string \| TemplateRef` | - | | `[nzMessage]` | 警告提示内容 | `string \| TemplateRef` | - | -| `[nzShowIcon]` | 是否显示辅助图标，`nzBanner` 模式下默认值为 `true` | `boolean` | `false` | +| `[nzShowIcon]` | 是否显示辅助图标，`nzBanner` 模式下默认值为 `true` | `boolean` | `false` | ✅ | | `[nzIconType]` | 自定义图标类型，`nzShowIcon` 为 `true` 时有效 | `string \| string[] \| Set \| { [klass: string]: any; }` | - | | `[nzType]` | 指定警告提示的样式，`nzBanner` 模式下默认值为 `'warning'` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | | `(nzOnClose)` | 关闭时触发的回调函数 | `EventEmitter` | - | diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts index c48042e8c3c..2c3a5df06d2 100644 --- a/components/alert/nz-alert.component.ts +++ b/components/alert/nz-alert.component.ts @@ -17,7 +17,7 @@ import { TemplateRef, ViewEncapsulation } from '@angular/core'; -import { slideAlertMotion, InputBoolean, NgClassType } from 'ng-zorro-antd/core'; +import { slideAlertMotion, InputBoolean, NgClassType, NzConfigService, WithConfig } from 'ng-zorro-antd/core'; @Component({ selector: 'nz-alert', @@ -41,8 +41,8 @@ export class NzAlertComponent implements OnChanges { @Input() nzMessage: string | TemplateRef; @Input() nzDescription: string | TemplateRef; @Input() nzType: 'success' | 'info' | 'warning' | 'error' = 'info'; - @Input() @InputBoolean() nzCloseable = false; - @Input() @InputBoolean() nzShowIcon = false; + @Input() @WithConfig(false) @InputBoolean() nzCloseable: boolean; + @Input() @WithConfig(false) @InputBoolean() nzShowIcon: boolean; @Input() @InputBoolean() nzBanner = false; @Output() readonly nzOnClose = new EventEmitter(); @@ -58,6 +58,8 @@ export class NzAlertComponent implements OnChanges { private isShowIconSet = false; private inferredIconType: string = 'info-circle'; + constructor(public nzConfigService: NzConfigService) {} + closeAlert(): void { this.destroy = true; } diff --git a/components/anchor/doc/index.en-US.md b/components/anchor/doc/index.en-US.md index e2183ef3205..05c401c4711 100755 --- a/components/anchor/doc/index.en-US.md +++ b/components/anchor/doc/index.en-US.md @@ -22,12 +22,12 @@ import { NzAnchorModule } from 'ng-zorro-antd/anchor'; ### nz-anchor -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzAffix]` | Fixed mode of Anchor | `boolean` | `true` | -| `[nzBounds]` | Bounding distance of anchor area, unit: px | `number` | `5` | -| `[nzOffsetTop]` | Pixels to offset from top when calculating position of scroll | `number` | `0` | -| `[nzShowInkInFixed]` | Whether show ink-balls in Fixed mode | `boolean` | `false` | +| `[nzBounds]` | Bounding distance of anchor area, unit: px | `number` | `5` | ✅ | +| `[nzOffsetTop]` | Pixels to offset from top when calculating position of scroll | `number` | `0` | ✅ | +| `[nzShowInkInFixed]` | Whether show ink-balls in Fixed mode | `boolean` | `false` | ✅ | | `[nzTarget]` | Scrolling container | `string \| HTMLElement` | `window` | | `(nzClick)` | Click of Anchor item | `EventEmitter` | - | | `(nzScroll)` | The scroll function that is triggered when scrolling to an anchor. | `EventEmitter` | - | diff --git a/components/anchor/doc/index.zh-CN.md b/components/anchor/doc/index.zh-CN.md index 4de244e5877..4b9852a5dab 100755 --- a/components/anchor/doc/index.zh-CN.md +++ b/components/anchor/doc/index.zh-CN.md @@ -24,12 +24,12 @@ import { NzAnchorModule } from 'ng-zorro-antd/anchor'; ### nz-anchor -| 成员 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 成员 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzAffix]` | 固定模式 | `boolean` | `true` | -| `[nzBounds]` | 锚点区域边界，单位：px | `number` | `5` | -| `[nzOffsetTop]` | 距离窗口顶部达到指定偏移量后触发 | `number` | - | -| `[nzShowInkInFixed]` | 固定模式是否显示小圆点 | `boolean` | `false` | +| `[nzBounds]` | 锚点区域边界，单位：px | `number` | `5` | ✅ | +| `[nzOffsetTop]` | 距离窗口顶部达到指定偏移量后触发 | `number` | - | ✅ | +| `[nzShowInkInFixed]` | 固定模式是否显示小圆点 | `boolean` | `false` | ✅ | | `[nzTarget]` | 指定滚动的容器 | `string \| HTMLElement` | `window` | | `(nzClick)` | 点击项触发 | `EventEmitter` | - | | `(nzScroll)` | 滚动至某锚点时触发 | `EventEmitter` | - | diff --git a/components/anchor/nz-anchor.component.ts b/components/anchor/nz-anchor.component.ts index e2e5c715a0c..58740a4717e 100644 --- a/components/anchor/nz-anchor.component.ts +++ b/components/anchor/nz-anchor.component.ts @@ -25,7 +25,15 @@ import { import { fromEvent, Subscription } from 'rxjs'; import { distinctUntilChanged, throttleTime } from 'rxjs/operators'; -import { toNumber, InputBoolean, InputNumber, NgStyleInterface, NzScrollService } from 'ng-zorro-antd/core'; +import { + toNumber, + InputBoolean, + InputNumber, + NgStyleInterface, + NzConfigService, + NzScrollService, + WithConfig +} from 'ng-zorro-antd/core'; import { NzAnchorLinkComponent } from './nz-anchor-link.component'; @@ -48,10 +56,11 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit { @ViewChild('ink', { static: false }) private ink: ElementRef; @Input() @InputBoolean() nzAffix = true; - @Input() @InputBoolean() nzShowInkInFixed = false; - @Input() @InputNumber() nzBounds: number = 5; + @Input() @WithConfig(false) @InputBoolean() nzShowInkInFixed: boolean; + @Input() @WithConfig(5) @InputNumber() nzBounds: number; @Input() + @WithConfig() set nzOffsetTop(value: number) { this._offsetTop = toNumber(value, 0); this.wrapperStyle = { @@ -84,6 +93,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit { private destroyed = false; constructor( + public nzConfigService: NzConfigService, private scrollSrv: NzScrollService, /* tslint:disable-next-line:no-any */ @Inject(DOCUMENT) private doc: any, diff --git a/components/avatar/doc/index.en-US.md b/components/avatar/doc/index.en-US.md index 8d7eedc83c6..47738281d1f 100644 --- a/components/avatar/doc/index.en-US.md +++ b/components/avatar/doc/index.en-US.md @@ -18,11 +18,11 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar'; ### nz-avatar -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzIcon]` | the `Icon` type for an icon avatar, see `Icon` | `string` | - | -| `[nzShape]` | the shape of avatar | `'circle' \| 'square'` | `'circle'` | -| `[nzSize]` | the size of the avatar | `'large' \| 'small' \| 'default' \| number` | `'default'` | +| `[nzShape]` | the shape of avatar | `'circle' \| 'square'` | `'circle'` | ✅ | +| `[nzSize]` | the size of the avatar | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ | | `[nzSrc]` | the address of the image for an image avatar | `string` | - | | `[nzSrcSet]` | a list of sources to use for different screen resolutions | string | - | | `[nzAlt]` | This attribute defines the alternative text describing the image | string | - | diff --git a/components/avatar/doc/index.zh-CN.md b/components/avatar/doc/index.zh-CN.md index 1429878726d..f0d79449008 100644 --- a/components/avatar/doc/index.zh-CN.md +++ b/components/avatar/doc/index.zh-CN.md @@ -19,11 +19,11 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar'; ### nz-avatar -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzIcon]` | 设置头像的图标类型，参考 `Icon` | `string` | - | -| `[nzShape]` | 指定头像的形状 | `'circle' \| 'square'` | `'circle'` | -| `[nzSize]` | 设置头像的大小 | `'large' \| 'small' \| 'default' \| number` | `'default'` | +| `[nzShape]` | 指定头像的形状 | `'circle' \| 'square'` | `'circle'` | ✅ | +| `[nzSize]` | 设置头像的大小 | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ | | `[nzSrc]` | 图片类头像的资源地址 | `string` | - | | `[nzSrcSet]` | 设置图片类头像响应式资源地址 | string | - | | `[nzAlt]` | 图像无法显示时的替代文本 | string | - | diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts index 15d8b260ba8..54f9d8c3928 100644 --- a/components/avatar/nz-avatar.component.ts +++ b/components/avatar/nz-avatar.component.ts @@ -22,14 +22,14 @@ import { ViewEncapsulation } from '@angular/core'; -import { NzSizeLDSType, NzSizeMap, NzUpdateHostClassService } from 'ng-zorro-antd/core'; - -export type NzAvatarShape = 'square' | 'circle'; -export type NzAvatarSize = NzSizeLDSType | number; - -export interface NzAvatarSizeMap { - [size: string]: string; -} +import { + NzConfigService, + NzShapeSCType, + NzSizeLDSType, + NzSizeMap, + NzUpdateHostClassService, + WithConfig +} from 'ng-zorro-antd/core'; @Component({ selector: 'nz-avatar', @@ -41,8 +41,8 @@ export interface NzAvatarSizeMap { encapsulation: ViewEncapsulation.None }) export class NzAvatarComponent implements OnChanges { - @Input() nzShape: NzAvatarShape = 'circle'; - @Input() nzSize: NzAvatarSize = 'default'; + @Input() @WithConfig('circle') nzShape: NzShapeSCType; + @Input() @WithConfig('default') nzSize: NzSizeLDSType | number; @Input() nzText: string; @Input() nzSrc: string; @Input() nzSrcSet: string; @@ -63,6 +63,7 @@ export class NzAvatarComponent implements OnChanges { private sizeMap: NzSizeMap = { large: 'lg', small: 'sm' }; constructor( + public nzConfigService: NzConfigService, private elementRef: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService, diff --git a/components/back-top/doc/index.en-US.md b/components/back-top/doc/index.en-US.md index d67a47e85c2..63571fd4a1d 100644 --- a/components/back-top/doc/index.en-US.md +++ b/components/back-top/doc/index.en-US.md @@ -26,10 +26,10 @@ import { NzBackTopModule } from 'ng-zorro-antd/back-top'; > The distance to the bottom is set to `50px` by default, which is overridable. > If you decide to use custom styles, please note the size limit: no more than `40px * 40px`. -| Property | Description | Type | Default | -| --- | --- | --- | --- | +| Property | Description | Type | Default | Global Config | +| --- | --- | --- | --- | --- | | `[nzTemplate]` | custom content | `TemplateRef` | - | -| `[nzVisibilityHeight]` | the `nz-back-top` button will not show until the scroll height reaches this value | `number` | `400` | +| `[nzVisibilityHeight]` | the `nz-back-top` button will not show until the scroll height reaches this value | `number` | `400` | ✅ | | `[nzTarget]` | specifies the scrollable area dom node | `string \| Element` | `window` | | `(nzClick)` | a callback function, which can be executed when you click the button | `EventEmitter` | - | diff --git a/components/back-top/doc/index.zh-CN.md b/components/back-top/doc/index.zh-CN.md index 67643f5dbe1..441174fda4f 100644 --- a/components/back-top/doc/index.zh-CN.md +++ b/components/back-top/doc/index.zh-CN.md @@ -27,9 +27,9 @@ import { NzBackTopModule } from 'ng-zorro-antd/back-top'; > 有默认样式，距离底部 `50px`，可覆盖。 > 自定义样式宽高不大于 `40px * 40px`。 -| 成员 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 成员 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzTemplate]` | 自定义内容，见示例 | `TemplateRef` | - | -| `[nzVisibilityHeight]` | 滚动高度达到此参数值才出现 `nz-back-top` | `number` | `400` | +| `[nzVisibilityHeight]` | 滚动高度达到此参数值才出现 `nz-back-top` | `number` | `400` | ✅ | | `[nzTarget]` | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | `string \| Element` | `window` | | `(nzClick)` | 点击按钮的回调函数 | `EventEmitter` | - | diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts index 2430317c326..a229a367ce0 100644 --- a/components/back-top/nz-back-top.component.ts +++ b/components/back-top/nz-back-top.component.ts @@ -22,7 +22,7 @@ import { ViewEncapsulation } from '@angular/core'; -import { fadeMotion, toNumber, NzScrollService } from 'ng-zorro-antd/core'; +import { fadeMotion, InputNumber, NzConfigService, NzScrollService, WithConfig } from 'ng-zorro-antd/core'; import { fromEvent, Subscription } from 'rxjs'; import { distinctUntilChanged, throttleTime } from 'rxjs/operators'; @@ -42,17 +42,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy { visible: boolean = false; @Input() nzTemplate: TemplateRef; - - private _visibilityHeight: number = 400; - - @Input() - set nzVisibilityHeight(value: number) { - this._visibilityHeight = toNumber(value, 400); - } - - get nzVisibilityHeight(): number { - return this._visibilityHeight; - } + @Input() @WithConfig(400) @InputNumber() nzVisibilityHeight: number; @Input() set nzTarget(el: string | HTMLElement) { @@ -63,6 +53,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy { @Output() readonly nzClick: EventEmitter = new EventEmitter(); constructor( + public nzConfigService: NzConfigService, private scrollSrv: NzScrollService, // tslint:disable-next-line:no-any @Inject(DOCUMENT) private doc: any, diff --git a/components/badge/doc/index.en-US.md b/components/badge/doc/index.en-US.md index 850676eada4..cca9c2b62e4 100644 --- a/components/badge/doc/index.en-US.md +++ b/components/badge/doc/index.en-US.md @@ -32,13 +32,13 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge'; ### nz-badge -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzColor]` | Customize Badge dot color | string | - | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | +| `[nzColor]` | Customize Badge dot color | string | - | ✅ | | `[nzCount]` | Number to show in badge | `number \| TemplateRef` | - | | `[nzDot]` | Whether to display a red dot instead of `count` | `boolean` | `false` | | `[nzShowDot]` | Whether to display the red dot | `boolean` | `true` | -| `[nzOverflowCount]` | Max count to show | `number` | `99` | +| `[nzOverflowCount]` | Max count to show | `number` | `99` | ✅ | | `[nzShowZero]` | Whether to show badge when `count` is zero | `boolean` | `false` | | `[nzStatus]` | Set `nz-badge` as a status dot | `'success' \| 'processing' \| 'default' \| 'error' \| 'warning'` | - | | `[nzText]` | If `nzStatus` is set, `text` sets the display text of the status `dot` | `string` | - | diff --git a/components/badge/doc/index.zh-CN.md b/components/badge/doc/index.zh-CN.md index 1ff52fe4526..1bf38ee798e 100644 --- a/components/badge/doc/index.zh-CN.md +++ b/components/badge/doc/index.zh-CN.md @@ -33,13 +33,13 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge'; ### nz-badge -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[nzColor]` | 自定义小圆点的颜色 | string | - | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | +| `[nzColor]` | 自定义小圆点的颜色 | string | - | ✅ | | `[nzCount]` | 展示的数字，大于 nzOverflowCount 时显示为 `${nzOverflowCount}+`，为 0 时隐藏 | `number \| TemplateRef` | - | | `[nzDot]` | 不展示数字，只有一个小红点 | `boolean` | `false` | | `[nzShowDot]` | 是否展示小红点 | `boolean` | `true` | -| `[nzOverflowCount]` | 展示封顶的数字值 | `number` | `99` | +| `[nzOverflowCount]` | 展示封顶的数字值 | `number` | `99` | ✅ | | `[nzShowZero]` | 当数值为 0 时，是否展示 Badge | `boolean` | `false` | | `[nzStatus]` | 设置 `nz-badge` 为状态点 | `'success' \| 'processing' \| 'default' \| 'error' \| 'warning'` | - | | `[nzText]` | 在设置了 `nzStatus` 的前提下有效，设置状态点的文本 | `string` | - | diff --git a/components/badge/nz-badge.component.ts b/components/badge/nz-badge.component.ts index 27a48327bf8..917af9d16f7 100644 --- a/components/badge/nz-badge.component.ts +++ b/components/badge/nz-badge.component.ts @@ -24,7 +24,7 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { isEmpty, zoomBadgeMotion, InputBoolean } from 'ng-zorro-antd/core'; +import { isEmpty, zoomBadgeMotion, InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core'; import { Subject } from 'rxjs'; import { startWith, take, takeUntil } from 'rxjs/operators'; @@ -67,12 +67,12 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes presetColor: string | null = null; count: number; @ViewChild('contentElement', { static: false }) contentElement: ElementRef; - @Input() @InputBoolean() nzShowZero = false; + @Input() @InputBoolean() nzShowZero: boolean = false; @Input() @InputBoolean() nzShowDot = true; @Input() @InputBoolean() nzDot = false; - @Input() nzOverflowCount = 99; + @Input() @WithConfig(99) nzOverflowCount: number; @Input() nzText: string; - @Input() nzColor: string; + @Input() @WithConfig() nzColor: string; @Input() nzTitle: string; @Input() nzStyle: { [key: string]: string }; @Input() nzStatus: NzBadgeStatusType; @@ -97,6 +97,7 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes } constructor( + public nzConfigService: NzConfigService, private renderer: Renderer2, private elementRef: ElementRef, private contentObserver: ContentObserver, diff --git a/components/button/doc/index.en-US.md b/components/button/doc/index.en-US.md index c8a9c647afb..1c6f9c4d0aa 100644 --- a/components/button/doc/index.en-US.md +++ b/components/button/doc/index.en-US.md @@ -24,11 +24,11 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`disabled`. -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzGhost]` | make background transparent and invert text and border colors | `boolean` | `false` | | `[nzLoading]` | set the loading status of button | `boolean` | `false` | -| `[nzShape]` | can be set to `circle` `round` or omitted | `'circle' \| 'round'` | - | -| `[nzSize]` | can be set to `small` `large` or omitted | `'large' \| 'small' \| 'default'` | `'default'` | -| `[nzType]` | can be set to `primary` `dashed` `danger` or omitted (meaning `default`) | `'primary' \| 'dashed' \| 'danger' \| 'default' \| 'link'` | `'default'` | +| `[nzShape]` | can be set to `circle` `round` or omitted | `'circle'\|'round'` | - | | +| `[nzSize]` | can be set to `small` `large` or omitted | `'large'\|'small'\|'default'` | `'default'` | ✅ | +| `[nzType]` | can be set to `primary` `dashed` `danger` or omitted (meaning `default`) | `'primary'\|'dashed'\|'danger'\|'default'\|'link'` | `'default'` | | `[nzBlock]` | option to fit button width to its parent width | `boolean` | `false` | diff --git a/components/button/doc/index.zh-CN.md b/components/button/doc/index.zh-CN.md index 80f50f67282..a431157dc24 100644 --- a/components/button/doc/index.zh-CN.md +++ b/components/button/doc/index.zh-CN.md @@ -28,11 +28,11 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; 按钮的属性说明如下： -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 属性 | 说明 | 类型 | 默认值 | 支持全局配置 | +| --- | --- | --- | --- | --- | | `[nzGhost]` | 幽灵属性，使按钮背景透明 | `boolean` | `false` | | `[nzLoading]` | 设置按钮载入状态 | `boolean` | `false` | -| `[nzShape]` | 设置按钮形状，可选值为 `circle` `round` 或者不设 | `'circle' \| 'round'` | - | -| `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large' \| 'small' \| 'default'` | `'default'` | -| `[nzType]` | 设置按钮类型，可选值为 `primary` `dashed` `danger` 或者不设 | `'primary' \| 'dashed' \| 'danger' \| 'default' \| 'link'` | `'default'` | +| `[nzShape]` | 设置按钮形状，可选值为 `circle` `round` 或者不设 | `'circle'\|'round'` | - | | +| `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large'\|'small'\|'default'` | `'default'` | ✅ | +| `[nzType]` | 设置按钮类型，可选值为 `primary` `dashed` `danger` 或者不设 | `'primary'\|'dashed'\|'danger'\|'default'\|'link'` | `'default'` | | `[nzBlock]` | 将按钮宽度调整为其父宽度的选项 | `boolean` | `false` | diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts index ef532068ba1..d0807b10d20 100644 --- a/components/button/nz-button.component.ts +++ b/components/button/nz-button.component.ts @@ -35,13 +35,16 @@ import { findFirstNotEmptyNode, findLastNotEmptyNode, isEmpty, + trimComponentName, InputBoolean, + NzConfigService, NzSizeLDSType, NzSizeMap, NzUpdateHostClassService, NzWaveConfig, NzWaveDirective, - NZ_WAVE_GLOBAL_CONFIG + NZ_WAVE_GLOBAL_CONFIG, + WithConfig } from 'ng-zorro-antd/core'; import { NzIconDirective } from 'ng-zorro-antd/icon'; import { Subject } from 'rxjs'; @@ -60,10 +63,6 @@ export type NzButtonShape = 'circle' | 'round' | null; templateUrl: './nz-button.component.html' }) export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, OnChanges { - readonly el: HTMLElement = this.elementRef.nativeElement; - private iconElement: HTMLElement; - private iconOnly = false; - private destroy$ = new Subject(); @ViewChild('contentElement', { static: true }) contentElement: ElementRef; @ContentChildren(NzIconDirective, { read: ElementRef }) listOfIconElement: QueryList; @HostBinding('attr.nz-wave') nzWave = new NzWaveDirective( @@ -72,13 +71,20 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O this.waveConfig, this.animationType ); - @Input() @InputBoolean() nzBlock = false; - @Input() @InputBoolean() nzGhost = false; - @Input() @InputBoolean() nzSearch = false; - @Input() @InputBoolean() nzLoading = false; + + @Input() @InputBoolean() nzBlock: boolean = false; + @Input() @InputBoolean() nzGhost: boolean = false; + @Input() @InputBoolean() nzSearch: boolean = false; + @Input() @InputBoolean() nzLoading: boolean = false; @Input() nzType: NzButtonType = 'default'; @Input() nzShape: NzButtonShape = null; - @Input() nzSize: NzSizeLDSType = 'default'; + @Input() @WithConfig('default') nzSize: NzSizeLDSType; + + readonly el: HTMLElement = this.elementRef.nativeElement; + + private iconElement: HTMLElement; + private iconOnly = false; + private destroy$ = new Subject(); /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289 */ setClassMap(): void { @@ -143,10 +149,18 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O private contentObserver: ContentObserver, private nzUpdateHostClassService: NzUpdateHostClassService, private ngZone: NgZone, + public nzConfigService: NzConfigService, @Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) private waveConfig: NzWaveConfig, @Optional() @Inject(ANIMATION_MODULE_TYPE) private animationType: string ) { this.renderer.addClass(elementRef.nativeElement, 'ant-btn'); + this.nzConfigService + .getConfigChangeEventForComponent(trimComponentName(this.constructor.name)) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.setClassMap(); + this.cdr.markForCheck(); + }); } ngAfterContentInit(): void { diff --git a/components/card/doc/index.en-US.md b/components/card/doc/index.en-US.md index c06233824dc..96ed56da184 100644 --- a/components/card/doc/index.en-US.md +++ b/components/card/doc/index.en-US.md @@ -27,18 +27,18 @@ import { NzCardModule } from 'ng-zorro-antd/card'; ### nz-card -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzActions]` | The action list, shows at the bottom of the Card. | `Array>` | - | | `[nzBodyStyle]` | Inline style to apply to the card content | `{ [key: string]: string }` | - | -| `[nzBordered]` | Toggles rendering of the border around the card | `boolean` | `true` | +| `[nzBordered]` | Toggles rendering of the border around the card | `boolean` | `true` | ✅ | | `[nzCover]` | Card cover | `TemplateRef` | - | -| `[nzExtra]` | Content to render in the top-right corner of the card | `string \| TemplateRef` | - | -| `[nzHoverable]` | Lift up when hovering card | `boolean` | `false` | +| `[nzExtra]` | Content to render in the top-right corner of the card | `string\|TemplateRef` | - | +| `[nzHoverable]` | Lift up when hovering card | `boolean` | `false` | ✅ | | `[nzLoading]` | Shows a loading indicator while the contents of the card are being fetched | `boolean` | `false` | -| `[nzTitle]` | Card title | `string \| TemplateRef` | - | +| `[nzTitle]` | Card title | `string\|TemplateRef` | - | | `[nzType]` | Card style type, can be set to `inner` or not set | `'inner'` | - | -| `[nzSize]` | Size of card | `'default' \| 'small'` | `'default'` | +| `[nzSize]` | Size of card | `'default'\|'small'` | `'default'` | ✅ | ### nz-card-meta @@ -46,8 +46,8 @@ import { NzCardModule } from 'ng-zorro-antd/card'; | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | `[nzAvatar]` | avatar or icon | `TemplateRef` | - | -| `[nzDescription]` | description content | `string \| TemplateRef` | - | -| `[nzTitle]` | title content | `string \| TemplateRef` | - | +| `[nzDescription]` | description content | `string\|TemplateRef` | - | +| `[nzTitle]` | title content | `string\|TemplateRef` | - | ### [nz-card-grid] Area for grid style card diff --git a/components/card/doc/index.zh-CN.md b/components/card/doc/index.zh-CN.md index 4cf938697cb..eb95b0a7584 100644 --- a/components/card/doc/index.zh-CN.md +++ b/components/card/doc/index.zh-CN.md @@ -28,18 +28,18 @@ import { NzCardModule } from 'ng-zorro-antd/card'; ### nz-card -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | +| --- | --- | --- | --- | --- | | `[nzActions]` | 卡片操作组，位置在卡片底部 | `Array>` | - | | `[nzBodyStyle]` | 内容区域自定义样式 | `{ [key: string]: string }` | - | -| `[nzBordered]` | 是否有边框 | `boolean` | `true` | +| `[nzBordered]` | 是否有边框 | `boolean` | `true` | ✅ | | `[nzCover]` | 卡片封面 | `TemplateRef` | - | -| `[nzExtra]` | 卡片右上角的操作区域 | `string \| TemplateRef` | - | -| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `false` | +| `[nzExtra]` | 卡片右上角的操作区域 | `string\|TemplateRef` | - | +| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `false` | ✅ | | `[nzLoading]` | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | `boolean` | `false` | -| `[nzTitle]` | 卡片标题 | `string \| TemplateRef` | - | +| `[nzTitle]` | 卡片标题 | `string\|TemplateRef` | - | | `[nzType]` | 卡片类型，可设置为 `inner` 或 不设置 | `'inner'` | - | -| `[nzSize]` | 卡片的尺寸 | `'default' \| 'small'` | `'default'` | +| `[nzSize]` | 卡片的尺寸 | `'default'\|'small'` | `'default'` | ✅ | ### nz-card-meta @@ -54,4 +54,4 @@ import { NzCardModule } from 'ng-zorro-antd/card'; 分隔卡片内容区域 ### nz-card-tab -分隔页签标题区域 \ No newline at end of file +分隔页签标题区域 diff --git a/components/card/nz-card.component.ts b/components/card/nz-card.component.ts index 5bd15fb76a5..bc06148d515 100755 --- a/components/card/nz-card.component.ts +++ b/components/card/nz-card.component.ts @@ -18,7 +18,7 @@ import { TemplateRef, ViewEncapsulation } from '@angular/core'; -import { InputBoolean } from 'ng-zorro-antd/core'; +import { InputBoolean, NzConfigService, NzSizeDSType, WithConfig } from 'ng-zorro-antd/core'; import { NzCardGridDirective } from './nz-card-grid.directive'; import { NzCardTabComponent } from './nz-card-tab.component'; @@ -47,20 +47,20 @@ import { NzCardTabComponent } from './nz-card-tab.component'; } }) export class NzCardComponent { - @Input() @InputBoolean() nzBordered = true; + @Input() @WithConfig(true) @InputBoolean() nzBordered: boolean; @Input() @InputBoolean() nzLoading = false; - @Input() @InputBoolean() nzHoverable = false; + @Input() @WithConfig(false) @InputBoolean() nzHoverable: boolean; @Input() nzBodyStyle: { [key: string]: string }; @Input() nzCover: TemplateRef; @Input() nzActions: Array> = []; @Input() nzType: string; - @Input() nzSize: 'default' | 'small' = 'default'; + @Input() @WithConfig('default') nzSize: NzSizeDSType; @Input() nzTitle: string | TemplateRef; @Input() nzExtra: string | TemplateRef; @ContentChild(NzCardTabComponent, { static: false }) tab: NzCardTabComponent; @ContentChildren(NzCardGridDirective) grids: QueryList; - constructor(renderer: Renderer2, elementRef: ElementRef) { + constructor(public nzConfigService: NzConfigService, renderer: Renderer2, elementRef: ElementRef) { renderer.addClass(elementRef.nativeElement, 'ant-card'); } } diff --git a/components/carousel/doc/index.en-US.md b/components/carousel/doc/index.en-US.md index 1e72492744b..9f60c738b21 100644 --- a/components/carousel/doc/index.en-US.md +++ b/components/carousel/doc/index.en-US.md @@ -24,17 +24,17 @@ import { NzCarouselModule } from 'ng-zorro-antd/carousel'; ### nz-carousel -| Property | Description | Type | Default | Version since | +| Property | Description | Type | Default | Global Config | | -------- | ----------- | ---- | ------- | ------------- | -| `[nzAutoPlay]` | Whether to scroll automatically | `boolean` | `false` | | -| `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | `number` | `3000` | | -| `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - | | -| `[nzDotPosition]` | The position of the dots, which can be one of `top` `bottom` `left` `right` | `string` | `bottom` | 8.0.0 | -| `[nzDots]` | Whether to show the dots at the bottom of the gallery | `boolean` | `true` | | -| `[nzEffect]` | Transition effect | `'scrollx'\|'fade'` | `'scrollx'` | | -| `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` | | -| `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter` | - | | -| `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | | +| `[nzAutoPlay]` | Whether to scroll automatically | `boolean` | `false` | ✅ | +| `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | `number` | `3000` | ✅ | +| `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - | +| `[nzDotPosition]` | The position of the dots, which can be one of `top` `bottom` `left` `right` | `string` | `bottom` | ✅ | +| `[nzDots]` | Whether to show the dots at the bottom of the gallery | `boolean` | `true` | ✅ | +| `[nzEffect]` | Transition effect | `'scrollx'\|'fade'` | `'scrollx'` | ✅ | +| `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` | ✅ | +| `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter` | - | +| `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | - | #### Methods diff --git a/components/carousel/doc/index.zh-CN.md b/components/carousel/doc/index.zh-CN.md index cf4c8bc4da0..9b016ca40eb 100644 --- a/components/carousel/doc/index.zh-CN.md +++ b/components/carousel/doc/index.zh-CN.md @@ -25,17 +25,17 @@ import { NzCarouselModule } from 'ng-zorro-antd/carousel'; ### nz-carousel -| 参数 | 说明 | 类型 | 默认值 | 版本 | +| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | | --- | --- | --- | --- | --- | -| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` | | -| `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为0时不切换 | `number` | `3000` | | -| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - | | -| `[nzDotPosition]` | 面板指示点位置，可选 `top` `bottom` `left` `right` | `string` | `bottom` | 8.0.0 | | -| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` | | -| `[nzEffect]` | 动画效果函数，可取 `scrollx`, `fade` | `'scrollx'\|'fade'`|`'scrollx'` | | -| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` | | -| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter` | - | | -| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - | | +| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` | ✅ | +| `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为0时不切换 | `number` | `3000` | ✅ | +| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - | +| `[nzDotPosition]` | 面板指示点位置，可选 `top` `bottom` `left` `right` | `string` | `bottom` | ✅ | +| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` | ✅ | +| `[nzEffect]` | 动画效果函数，可取 `scrollx`, `fade` | `'scrollx'\|'fade'`|`'scrollx'` | ✅ | +| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` | ✅ | +| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter` | - | +| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - | #### 方法 diff --git a/components/carousel/nz-carousel-definitions.ts b/components/carousel/nz-carousel-definitions.ts index 6f884fd1f2b..ae05ed63879 100644 --- a/components/carousel/nz-carousel-definitions.ts +++ b/components/carousel/nz-carousel-definitions.ts @@ -11,7 +11,7 @@ import { NzCarouselContentDirective } from './nz-carousel-content.directive'; import { NzCarouselBaseStrategy } from './strategies/base-strategy'; export type NzCarouselEffects = 'fade' | 'scrollx' | string; -export type NzCarouselDotPosition = 'top' | 'bottom' | 'left' | 'right'; +export type NzCarouselDotPosition = 'top' | 'bottom' | 'left' | 'right' | string; export interface NzCarouselComponentAsSource { carouselContents: QueryList; diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts index d43ea528003..1e731ace135 100755 --- a/components/carousel/nz-carousel.component.ts +++ b/components/carousel/nz-carousel.component.ts @@ -32,10 +32,18 @@ import { ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; - -import { isTouchEvent, warnDeprecation, InputBoolean, InputNumber, NzDomEventService } from 'ng-zorro-antd/core'; import { finalize, takeUntil } from 'rxjs/operators'; +import { + isTouchEvent, + warnDeprecation, + InputBoolean, + InputNumber, + NzConfigService, + NzDomEventService, + WithConfig +} from 'ng-zorro-antd/core'; + import { NzCarouselContentDirective } from './nz-carousel-content.directive'; import { FromToInterface, @@ -86,11 +94,11 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD @ViewChild('slickTrack', { static: false }) slickTrack: ElementRef; @Input() nzDotRender: TemplateRef<{ $implicit: number }>; - @Input() nzEffect: NzCarouselEffects = 'scrollx'; - @Input() @InputBoolean() nzEnableSwipe = true; - @Input() @InputBoolean() nzDots: boolean = true; - @Input() @InputBoolean() nzAutoPlay = false; - @Input() @InputNumber() nzAutoPlaySpeed = 3000; + @Input() @WithConfig('scrollx') nzEffect: NzCarouselEffects; + @Input() @WithConfig(true) @InputBoolean() nzEnableSwipe: boolean; + @Input() @WithConfig(true) @InputBoolean() nzDots: boolean; + @Input() @WithConfig(false) @InputBoolean() nzAutoPlay: boolean; + @Input() @WithConfig(3000) @InputNumber() nzAutoPlaySpeed: number; @Input() @InputNumber() nzTransitionSpeed = 500; @Input() @@ -105,6 +113,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD } @Input() + @WithConfig('bottom') set nzDotPosition(value: NzCarouselDotPosition) { this._dotPosition = value; if (value === 'left' || value === 'right') { @@ -118,7 +127,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD return this._dotPosition; } - private _dotPosition: NzCarouselDotPosition = 'bottom'; + private _dotPosition: NzCarouselDotPosition; @Output() readonly nzBeforeChange = new EventEmitter(); @Output() readonly nzAfterChange = new EventEmitter(); @@ -140,6 +149,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD private isDragging = false; constructor( + public nzConfigService: NzConfigService, elementRef: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef, diff --git a/components/cascader/doc/index.en-US.md b/components/cascader/doc/index.en-US.md index 575548236cf..dcc8d90bc94 100755 --- a/components/cascader/doc/index.en-US.md +++ b/components/cascader/doc/index.en-US.md @@ -28,8 +28,8 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; ### nz-cascader -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | --------------------- | | `[ngModel]` | selected value | `any[]` | - | | `[nzAllowClear]` | whether allow clear | `boolean` | `true` | | `[nzAutoFocus]` | whether auto focus the input box | `boolean` | `false` | @@ -37,10 +37,10 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; | `[nzChangeOnSelect]` | change value on each selection if set to true, see above demo for details | `boolean` | `false` | | `[nzColumnClassName]` | additional className of column in the popup overlay | `string` | - | | `[nzDisabled]` | whether disabled select | `boolean` | `false` | -| `[nzExpandTrigger]` | expand current item when click or hover, one of 'click' 'hover' | `'click' \| 'hover'` | `'click'` | +| `[nzExpandTrigger]` | expand current item when click or hover, one of 'click' 'hover' | `'click'\|'hover'` | `'click'` | | `[nzMenuClassName]` | additional className of popup overlay | `string` | - | | `[nzMenuStyle]` | additional css style of popup overlay | `object` | - | -| `[nzNotFoundContent]` | Specify content to show when no result matches. | `string \| TemplateRef` | - | +| `[nzNotFoundContent]` | Specify content to show when no result matches. | `string\|TemplateRef` | - | | `[nzLabelProperty]` | the label property name of options | `string` | `'label'` | | `[nzLabelRender]` | render template of displaying selected options | `TemplateRef` | - | | `[nzLoadData]` | To load option lazily. If setting `ngModel` with an array value and `nzOptions` is not setting, lazy load will be call immediately | `(option: any, index?: index) => PromiseLike` | - | @@ -48,8 +48,8 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; | `[nzPlaceHolder]` | input placeholder | `string` | `'Please select'` | | `[nzShowArrow]` | Whether show arrow | `boolean` | `true` | | `[nzShowInput]` | Whether show input | `boolean` | `true` | -| `[nzShowSearch]` | Whether support search. Cannot be used with `[nzLoadData]` at the same time | `boolean \| NzShowSearchOptions` | `false` | -| `[nzSize]` | input size, one of `large` `default` `small` | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzShowSearch]` | Whether support search. Cannot be used with `[nzLoadData]` at the same time | `boolean\|NzShowSearchOptions` | `false` | +| `[nzSize]` | input size, one of `large` `default` `small` | `'large'\|'small'\|'default'` | `'default'` | ✅ | | `[nzValueProperty]` | the value property name of options | `string` | `'value'` | | `(ngModelChange)` | Emit on values change | `EventEmitter` | - | | `(nzClear)` | Emit on clear values | `EventEmitter` | - | diff --git a/components/cascader/doc/index.zh-CN.md b/components/cascader/doc/index.zh-CN.md index fed99ae2a53..123f7a0a2f3 100755 --- a/components/cascader/doc/index.zh-CN.md +++ b/components/cascader/doc/index.zh-CN.md @@ -29,8 +29,8 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; ### nz-cascader -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | +| --- | --- | --- | --- | --- | | `[ngModel]` | 指定选中项 | `any[]` | - | | `[nzAllowClear]` | 是否支持清除 | `boolean` | `true` | | `[nzAutoFocus]` | 是否自动聚焦，当存在输入框时 | `boolean` | `false` | @@ -38,10 +38,10 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; | `[nzChangeOnSelect]` | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | `boolean` | `false` | | `[nzColumnClassName]` | 自定义浮层列类名 | `string` | - | | `[nzDisabled]` | 禁用 | `boolean` | `false` | -| `[nzExpandTrigger]` | 次级菜单的展开方式，可选 'click' 和 'hover' | `'click' \| 'hover'` | `'click'` | +| `[nzExpandTrigger]` | 次级菜单的展开方式，可选 'click' 和 'hover' | `'click'\|'hover'` | `'click'` | | `[nzMenuClassName]` | 自定义浮层类名 | `string` | - | | `[nzMenuStyle]` | 自定义浮层样式 | `object` | - | -| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string \| TemplateRef` | - | +| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string\|TemplateRef` | - | | `[nzLabelProperty]` | 选项的显示值的属性名 | `string` | `'label'` | | `[nzLabelRender]` | 选择后展示的渲染模板 | `TemplateRef` | - | | `[nzLoadData]` | 用于动态加载选项。如果提供了`ngModel`初始值，且未提供`nzOptions`值，则会立即触发动态加载。 | `(option: any, index?: index) => PromiseLike` | - | @@ -49,8 +49,8 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; | `[nzPlaceHolder]` | 输入框占位文本 | `string` | `'请选择'` | | `[nzShowArrow]` | 是否显示箭头 | `boolean` | `true` | | `[nzShowInput]` | 显示输入框 | `boolean` | `true` | -| `[nzShowSearch]` | 是否支持搜索，默认情况下对 `label` 进行全匹配搜索，不能和 `[nzLoadData]` 同时使用 | `boolean \| NzShowSearchOptions` | `false` | -| `[nzSize]` | 输入框大小，可选 `large` `default` `small` | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzShowSearch]` | 是否支持搜索，默认情况下对 `label` 进行全匹配搜索，不能和 `[nzLoadData]` 同时使用 | `boolean\|NzShowSearchOptions` | `false` | +| `[nzSize]` | 输入框大小，可选 `large` `default` `small` | `'large'\|'small'\|'default'` | `'default'` | ✅ | | `[nzValueProperty]` | 选项的实际值的属性名 | `string` | `'value'` | | `(ngModelChange)` | 值发生变化时触发 | `EventEmitter` | - | | `(nzVisibleChange)` | 菜单浮层的显示/隐藏 | `EventEmitter` | - | diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts index 98fd279d075..64fb8a8baab 100644 --- a/components/cascader/nz-cascader.component.ts +++ b/components/cascader/nz-cascader.component.ts @@ -36,11 +36,14 @@ import { startWith, takeUntil } from 'rxjs/operators'; import { slideMotion, toArray, + trimComponentName, warnDeprecation, DEFAULT_DROPDOWN_POSITIONS, InputBoolean, NgClassType, - NzNoAnimationDirective + NzConfigService, + NzNoAnimationDirective, + WithConfig } from 'ng-zorro-antd/core'; import { NzCascaderI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n'; @@ -114,7 +117,7 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit, @Input() nzLabelRender: TemplateRef; @Input() nzLabelProperty = 'label'; @Input() nzNotFoundContent: string | TemplateRef; - @Input() nzSize: NzCascaderSize = 'default'; + @Input() @WithConfig('default') nzSize: NzCascaderSize; @Input() nzShowSearch: boolean | NzShowSearchOptions; @Input() nzPlaceHolder: string; @Input() nzMenuClassName: string; @@ -209,6 +212,7 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit, constructor( public cascaderService: NzCascaderService, private i18nService: NzI18nService, + public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer2, @@ -267,6 +271,13 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit, this.setLocale(); }); + this.nzConfigService + .getConfigChangeEventForComponent(trimComponentName(this.constructor.name)) + .pipe(takeUntil(this.$destroy)) + .subscribe(() => { + this.cdr.markForCheck(); + }); + if (this.nzSelect.observers.length > 0) { warnDeprecation(`nzSelect is deprecated and will be removed in 9.0.0. Please use 'nzSelectionChange' instead.`); } diff --git a/components/collapse/doc/index.en-US.md b/components/collapse/doc/index.en-US.md index e7e3e162209..03a5856acce 100755 --- a/components/collapse/doc/index.en-US.md +++ b/components/collapse/doc/index.en-US.md @@ -24,10 +24,10 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse'; ### nz-collapse -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzAccordion]` | Accordion mode | `boolean` | `false`| -| `[nzBordered]` | Set border style | `boolean` | `true` | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | +| `[nzAccordion]` | Accordion mode | `boolean` | `false`| ✅ | +| `[nzBordered]` | Set border style | `boolean` | `true` | ✅ | ### nz-collapse-panel @@ -37,6 +37,6 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse'; | `[nzHeader]` | Title of the panel | `string \| TemplateRef` | - | | `[nzExpandedIcon]` | Customize an icon for toggle | `string \| TemplateRef` | - | | `[nzExtra]` | Extra element in the corner | `string \| TemplateRef` | - | -| `[nzShowArrow]` | Display arrow or not | `boolean` | `true` | +| `[nzShowArrow]` | Display arrow or not | `boolean` | `true` | ✅ | | `[nzActive]` | Active status of panel, double binding | `boolean` | - | | `(nzActiveChange)` | Callback function of the active status | `EventEmitter` | - | diff --git a/components/collapse/doc/index.zh-CN.md b/components/collapse/doc/index.zh-CN.md index eb9f1f8aa12..e7ecb0a9695 100755 --- a/components/collapse/doc/index.zh-CN.md +++ b/components/collapse/doc/index.zh-CN.md @@ -25,10 +25,10 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse'; ### nz-collapse -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[nzAccordion]` | 是否每次只打开一个tab | `boolean` | `false` | -| `[nzBordered]` | 是否有边框 | `boolean` | `true` | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | +| `[nzAccordion]` | 是否每次只打开一个tab | `boolean` | `false` | ✅ | +| `[nzBordered]` | 是否有边框 | `boolean` | `true` | ✅ | ### nz-collapse-panel @@ -38,6 +38,6 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse'; | `[nzHeader]` | 面板头内容 | `string \| TemplateRef` | - | | `[nzExpandedIcon]` | 自定义切换图标 | `string \| TemplateRef` | - | | `[nzExtra]` | 自定义渲染每个面板右上角的内容 | `string \| TemplateRef` | - | -| `[nzShowArrow]` | 是否展示箭头 | `boolean` | `true` | +| `[nzShowArrow]` | 是否展示箭头 | `boolean` | `true` | ✅ | | `[nzActive]` | 面板是否展开，可双向绑定 | `boolean` | - | | `(nzActiveChange)` | 面板展开回调 | `EventEmitter` | - | diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/nz-collapse-panel.component.ts index 05cfe27da92..bf5dd5446cf 100644 --- a/components/collapse/nz-collapse-panel.component.ts +++ b/components/collapse/nz-collapse-panel.component.ts @@ -22,7 +22,7 @@ import { ViewEncapsulation } from '@angular/core'; -import { collapseMotion, InputBoolean } from 'ng-zorro-antd/core'; +import { collapseMotion, InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core'; import { NzCollapseComponent } from './nz-collapse.component'; @@ -49,7 +49,7 @@ import { NzCollapseComponent } from './nz-collapse.component'; export class NzCollapsePanelComponent implements OnInit, OnDestroy { @Input() @InputBoolean() nzActive = false; @Input() @InputBoolean() nzDisabled = false; - @Input() @InputBoolean() nzShowArrow = true; + @Input() @WithConfig(true) @InputBoolean() nzShowArrow: boolean; @Input() nzExtra: string | TemplateRef; @Input() nzHeader: string | TemplateRef; @Input() nzExpandedIcon: string | TemplateRef; @@ -66,6 +66,7 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy { } constructor( + public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, @Host() private nzCollapseComponent: NzCollapseComponent, elementRef: ElementRef, diff --git a/components/collapse/nz-collapse.component.ts b/components/collapse/nz-collapse.component.ts index 6d146c57722..ebd548d0005 100644 --- a/components/collapse/nz-collapse.component.ts +++ b/components/collapse/nz-collapse.component.ts @@ -8,7 +8,7 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; -import { InputBoolean } from 'ng-zorro-antd/core'; +import { InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core'; import { NzCollapsePanelComponent } from './nz-collapse-panel.component'; @@ -28,8 +28,10 @@ import { NzCollapsePanelComponent } from './nz-collapse-panel.component'; }) export class NzCollapseComponent { private listOfNzCollapsePanelComponent: NzCollapsePanelComponent[] = []; - @Input() @InputBoolean() nzAccordion = false; - @Input() @InputBoolean() nzBordered = true; + @Input() @WithConfig(false) @InputBoolean() nzAccordion: boolean; + @Input() @WithConfig(true) @InputBoolean() nzBordered: boolean; + + constructor(public nzConfigService: NzConfigService) {} addPanel(value: NzCollapsePanelComponent): void { this.listOfNzCollapsePanelComponent.push(value); diff --git a/components/core/config/config.service.ts b/components/core/config/config.service.ts new file mode 100644 index 00000000000..cf164c042a9 --- /dev/null +++ b/components/core/config/config.service.ts @@ -0,0 +1,115 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +// tslint:disable no-any + +import { Inject, Injectable, Optional } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; + +import { filter, mapTo } from 'rxjs/operators'; + +import { NzConfig, NzConfigKey, NZ_CONFIG } from './config'; + +const isDefined = function(value?: any): boolean { + return value !== undefined; +}; + +@Injectable({ + providedIn: 'root' +}) +export class NzConfigService { + private configUpdated$ = new Subject(); + + /** Global config holding property. */ + private config: NzConfig; + + constructor(@Optional() @Inject(NZ_CONFIG) defaultConfig?: NzConfig) { + this.config = defaultConfig || {}; + } + + getConfigForComponent(componentName: T): NzConfig[T] { + return this.config[componentName]; + } + + getConfigChangeEventForComponent(componentName: NzConfigKey): Observable { + return this.configUpdated$.pipe( + filter(n => n === componentName), + mapTo(undefined) + ); + } + + set(componentName: T, value: NzConfig[T]): void { + this.config[componentName] = { ...this.config[componentName], ...value }; + this.configUpdated$.next(componentName); + } +} + +// tslint:disable:no-invalid-this +// tslint:disable:no-any + +const lowercaseFirstLetter = (s: string): string => { + return s.charAt(0).toLowerCase() + s.slice(1); +}; + +export const trimComponentName = (componentName: string): NzConfigKey => { + return lowercaseFirstLetter( + componentName + .replace('Nz', '') + .replace(/(Component|Directive|Service|ContainerComponent)$/g, '') + .toLowerCase() + ) as NzConfigKey; +}; + +/** + * This decorator is used to decorate properties. If a property is decorated, it would try to load default value from + * config. + */ +// tslint:disable-next-line:typedef +export function WithConfig(innerDefaultValue?: T) { + return function ConfigDecorator(target: any, propName: any, originalDescriptor?: TypedPropertyDescriptor): any { + const privatePropName = `$$__assignedValue__${propName}`; + const componentName = trimComponentName(target.constructor.name) as NzConfigKey; + + if (Object.prototype.hasOwnProperty.call(target, privatePropName)) { + console.warn( + `The prop "${privatePropName}" is already exist, it will be override by ${componentName} decorator.` + ); + } + + Object.defineProperty(target, privatePropName, { + configurable: true, + writable: true, + enumerable: false + }); + + return { + get(): T | undefined { + const originalValue = + originalDescriptor && originalDescriptor.get ? originalDescriptor.get.bind(this)() : this[privatePropName]; + + if (isDefined(originalValue)) { + return originalValue; + } + + const componentConfig = this.nzConfigService.getConfigForComponent(componentName) || {}; + const configValue = componentConfig[propName]; + + return isDefined(configValue) ? configValue : innerDefaultValue; + }, + set(value?: T): void { + if (originalDescriptor && originalDescriptor.set) { + originalDescriptor.set.bind(this)(value); + } else { + this[privatePropName] = value; + } + }, + configurable: true, + enumerable: true + }; + }; +} diff --git a/components/core/config/config.spec.ts b/components/core/config/config.spec.ts new file mode 100644 index 00000000000..c1424248bf8 --- /dev/null +++ b/components/core/config/config.spec.ts @@ -0,0 +1,128 @@ +import { Component, DebugElement } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +import { NzButtonComponent, NzButtonModule } from 'ng-zorro-antd/button'; +import { NzConfigService, NZ_CONFIG, WithConfig } from 'ng-zorro-antd/core'; + +@Component({ + template: '' +}) +export class NzGlobalConfigTestBindTwiceComponent { + @WithConfig('b') @WithConfig('a') v: string; + + constructor(public nzConfigService: NzConfigService) {} +} + +@Component({ + template: ` + + ` +}) +export class NzGlobalConfigTestBasicComponent { + size?: 'large' | 'default' | 'small'; + + constructor(public nzConfigService: NzConfigService) {} +} + +describe('nz global config', () => { + let fixture: ComponentFixture; + let testComponent: NzGlobalConfigTestBasicComponent; + let button: DebugElement; + let buttonEl: HTMLButtonElement; + + describe('decorator', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [NzGlobalConfigTestBindTwiceComponent] + }).compileComponents(); + })); + + it('should not decorate a property twice', () => { + expect(() => { + TestBed.createComponent(NzGlobalConfigTestBasicComponent); + }).toThrowError(); + }); + }); + + describe('without config', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [NzButtonModule], + declarations: [NzGlobalConfigTestBasicComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NzGlobalConfigTestBasicComponent); + testComponent = fixture.debugElement.componentInstance; + button = fixture.debugElement.query(By.directive(NzButtonComponent)); + buttonEl = button.nativeElement; + }); + + it('should render with in-component props', () => { + fixture.detectChanges(); + expect(buttonEl.className).toContain('ant-btn ant-btn-primary'); + + testComponent.size = 'large'; + fixture.detectChanges(); + expect(buttonEl.classList).toContain('ant-btn-lg'); + }); + }); + + describe('with config', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [NzButtonModule], + declarations: [NzGlobalConfigTestBasicComponent], + providers: [ + { + provide: NZ_CONFIG, + useValue: { + button: { + nzSize: 'large' + } + } + } + ] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NzGlobalConfigTestBasicComponent); + testComponent = fixture.debugElement.componentInstance; + button = fixture.debugElement.query(By.directive(NzButtonComponent)); + buttonEl = button.nativeElement; + }); + + it('should static config work', () => { + fixture.detectChanges(); + expect(buttonEl.classList).toContain('ant-btn-lg'); + + testComponent.size = 'default'; + fixture.detectChanges(); + expect(buttonEl.classList).not.toContain('ant-btn-lg'); + }); + + it('should dynamic config work', () => { + fixture.detectChanges(); + expect(buttonEl.classList).toContain('ant-btn-lg'); + + testComponent.nzConfigService.set('button', { nzSize: 'small' }); + fixture.detectChanges(); + expect(buttonEl.classList).toContain('ant-btn-sm'); + + testComponent.size = 'default'; + fixture.detectChanges(); + expect(buttonEl.classList).not.toContain('ant-btn-lg'); + expect(buttonEl.classList).not.toContain('ant-btn-sm'); + }); + + // It would fail silently. User cannot input a component name wrong - TypeScript comes to help! + // it('should raise error when the component with given name is not defined', () => { + // expect(() => { + // testComponent.nzConfigService.set('nzNotExist' as any, {}); // tslint:disable-line no-any + // }).toThrowError(); + // }); + }); +}); diff --git a/components/core/config/config.ts b/components/core/config/config.ts new file mode 100644 index 00000000000..0f515b21ce9 --- /dev/null +++ b/components/core/config/config.ts @@ -0,0 +1,242 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +import { InjectionToken, TemplateRef, Type } from '@angular/core'; + +import { NzAlignType, NzShapeSCType, NzSizeDSType, NzSizeLDSType, NzSizeMDSType } from '../types'; + +import { BreakpointMap, NzBreakpoint } from '../responsive/public-api'; + +// TODO: generate config files if custom build can be used. + +export interface NzConfig { + affix?: AffixConfig; + alert?: AlertConfig; + anchor?: AnchorConfig; + avatar?: AvatarConfig; + backTop?: BackTopConfig; + badge?: BadgeConfig; + button?: ButtonConfig; + card?: CardConfig; + carousel?: CarouselConfig; + cascader?: CascaderConfig; + collapse?: CollapseConfig; + collapsePanel?: CollapsePanelConfig; + descriptions?: DescriptionsConfig; + drawer?: DrawerConfig; + empty?: EmptyConfig; + form?: FormConfig; + grid?: GridConfig; + icon?: IconConfig; + modal?: ModalConfig; + message?: MessageConfig; + notification?: NotificationConfig; + progress?: ProgressConfig; + rate?: RateConfig; + switch?: SwitchConfig; + table?: TableConfig; + tabs?: TabsConfig; + timePicker?: TimePickerConfig; + tree?: TreeConfig; + treeSelect?: TreeSelectConfig; + typography?: TypographyConfig; +} + +export interface AffixConfig { + nzOffsetBottom?: number; + nzOffsetTop?: number; +} + +export interface AlertConfig { + nzCloseable?: boolean; + nzShowIcon?: boolean; +} + +export interface AvatarConfig { + nzShape?: NzShapeSCType; + nzSize?: NzSizeLDSType | number; +} + +export interface AnchorConfig { + nzBounds?: number; + nzOffsetBottom?: number; + nzOffsetTop?: number; + nzShowInkInFixed?: boolean; +} + +export interface BackTopConfig { + nzVisibilityHeight?: number; +} + +export interface BadgeConfig { + nzColor?: number; + nzOverflowCount?: number; + nzShowZero?: number; +} + +export interface ButtonConfig { + nzSize?: 'large' | 'default' | 'small'; +} + +export interface CardConfig { + nzSize?: NzSizeDSType; + nzHoverable?: boolean; + nzBordered?: boolean; +} + +export interface CarouselConfig { + nzAutoPlay?: boolean; + nzAutoPlaySpeed?: boolean; + nzDots?: boolean; + nzEffect?: 'scrollx' | 'fade' | string; + nzEnableSwipe?: boolean; + nzVertical?: boolean; +} + +export interface CascaderConfig { + nzSize?: string; +} + +export interface CollapseConfig { + nzAccordion?: boolean; + nzBordered?: boolean; +} + +export interface CollapsePanelConfig { + nzShowArrow?: boolean; +} + +export interface DescriptionsConfig { + nzBorder?: boolean; + nzColumn?: { [key in NzBreakpoint]?: number } | number; + nzSize?: 'default' | 'middle' | 'small'; + nzColon?: boolean; +} + +export interface DrawerConfig { + nzMask?: boolean; + nzMaskClosable?: boolean; +} + +export interface EmptyConfig { + // tslint:disable-next-line no-any + nzDefaultEmptyContent?: Type | TemplateRef | string | undefined; +} + +export interface FormConfig { + nzNoColon?: boolean; +} + +export interface GridConfig { + nzAlign?: NzAlignType; + nzGutter?: number | BreakpointMap; + nzJustify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between'; + nzType?: 'flex'; +} + +export interface IconConfig { + nzTheme?: 'fill' | 'outline' | 'twotone'; + nzTwotoneColor?: string; +} + +export interface MessageConfig { + nzAnimate?: boolean; + nzDuration?: number; + nzMaxStack?: number; + nzPauseOnHover?: boolean; + nzTop?: number | string; +} + +export interface ModalConfig { + nzMask?: boolean; + nzMaskClosable?: boolean; +} + +export interface NotificationConfig extends MessageConfig { + nzTop?: string | number; + nzBottom?: string | number; + nzPlacement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | string; +} + +export interface ProgressConfig { + nzGapDegree?: number; + nzGapPosition?: 'top' | 'right' | 'bottom' | 'left'; + nzShowInfo?: boolean; + nzStrokeSwitch?: number; + nzStrokeWidth?: number; + nzSize?: 'default' | 'small'; + nzStrokeLinecap?: 'round' | 'square'; + nzStrokeColor?: string; +} + +export interface RateConfig { + nzAllowClear?: boolean; + nzAllowHalf?: boolean; +} + +export interface SwitchConfig { + nzSize: NzSizeDSType; +} + +export interface TableConfig { + nzBordered?: boolean; + nzSize?: NzSizeMDSType; + nzShowQuickJumper?: boolean; + nzShowSizeChanger?: boolean; + nzSimple?: boolean; + nzHideOnSinglePage?: boolean; +} + +export interface TabsConfig { + nzAnimated?: + | boolean + | { + inkBar: boolean; + tabPane: boolean; + }; + nzSize?: NzSizeLDSType; + nzType?: 'line' | 'card'; + nzTabBarGutter?: number; + nzShowPagination?: boolean; +} + +export interface TimePickerConfig { + nzAllowEmpty?: boolean; + nzClearText?: string; + nzFormat?: string; + nzHourStep?: number; + nzMinuteStep?: number; + nzSecondStep?: number; + nzPopupClassName?: string; + nzUse12Hours?: string; +} + +export interface TreeConfig { + nzBlockNode?: boolean; + nzShowIcon?: boolean; + nzHideUnMatched?: boolean; +} + +export interface TreeSelectConfig { + nzShowIcon?: string; + nzShowLine?: boolean; + nzDropdownMatchSelectWidth?: boolean; + nzHideUnMatched?: boolean; + nzSize?: 'large' | 'small' | 'default'; +} + +export interface TypographyConfig { + nzEllipsisRows?: number; +} + +export type NzConfigKey = keyof NzConfig; + +/** + * User should provide an object implements this interface to set global configurations. + */ +export const NZ_CONFIG = new InjectionToken('nz-config'); diff --git a/components/core/config/index.ts b/components/core/config/index.ts new file mode 100644 index 00000000000..f17e95188c8 --- /dev/null +++ b/components/core/config/index.ts @@ -0,0 +1,9 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +export * from './public-api'; diff --git a/components/core/config/public-api.ts b/components/core/config/public-api.ts new file mode 100644 index 00000000000..eeabe795a95 --- /dev/null +++ b/components/core/config/public-api.ts @@ -0,0 +1,10 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +export * from './config.service'; +export * from './config'; diff --git a/components/core/public-api.ts b/components/core/public-api.ts index 7e338c3153c..8772714f389 100644 --- a/components/core/public-api.ts +++ b/components/core/public-api.ts @@ -24,3 +24,4 @@ export * from './logger/public-api'; export * from './responsive/public-api'; export * from './trans-button/public-api'; export * from './highlight/public-api'; +export * from './config/public-api'; diff --git a/components/core/responsive/break-point.ts b/components/core/responsive/nz-breakpoint.ts similarity index 77% rename from components/core/responsive/break-point.ts rename to components/core/responsive/nz-breakpoint.ts index ee56ddcaee5..0371b41dba6 100644 --- a/components/core/responsive/break-point.ts +++ b/components/core/responsive/nz-breakpoint.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -export enum Breakpoint { +export enum NzBreakpoint { xxl = 'xxl', xl = 'xl', lg = 'lg', @@ -15,7 +15,9 @@ export enum Breakpoint { xs = 'xs' } -export type BreakpointMap = { [key in Breakpoint]: string }; +export type NzBreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; + +export type BreakpointMap = { [key in NzBreakpoint]: string }; export const responsiveMap: BreakpointMap = { xs: '(max-width: 575px)', diff --git a/components/core/responsive/public-api.ts b/components/core/responsive/public-api.ts index 8a75b13ce18..d91deea2cf9 100644 --- a/components/core/responsive/public-api.ts +++ b/components/core/responsive/public-api.ts @@ -6,4 +6,4 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -export * from './break-point'; +export * from './nz-breakpoint'; diff --git a/components/core/types/direction.ts b/components/core/types/direction.ts index 33788791c6e..86753c3211b 100644 --- a/components/core/types/direction.ts +++ b/components/core/types/direction.ts @@ -8,3 +8,6 @@ export type NzDirectionVHIType = 'vertical' | 'horizontal' | 'inline'; export type NzDirectionVHType = 'vertical' | 'horizontal'; +export type NzFourDirectionType = 'top' | 'bottom' | 'left' | 'right'; + +export type NzAlignType = 'top' | 'middle' | 'bottom'; diff --git a/components/core/types/public-api.ts b/components/core/types/public-api.ts index a2d370f75dc..a24bf4af808 100644 --- a/components/core/types/public-api.ts +++ b/components/core/types/public-api.ts @@ -13,3 +13,4 @@ export * from './indexable'; export * from './ng-class'; export * from './size'; export * from './template'; +export * from './shape'; diff --git a/components/core/types/shape.ts b/components/core/types/shape.ts new file mode 100644 index 00000000000..e0689848cb7 --- /dev/null +++ b/components/core/types/shape.ts @@ -0,0 +1,9 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +export type NzShapeSCType = 'square' | 'circle'; diff --git a/components/core/types/size.ts b/components/core/types/size.ts index 998f0a3aa13..c697cd3f077 100644 --- a/components/core/types/size.ts +++ b/components/core/types/size.ts @@ -6,6 +6,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +// TODO(@wendzhue): replace other size with this type. export type NzSizeLDSType = 'large' | 'default' | 'small'; export type NzSizeMDSType = 'middle' | 'default' | 'small'; export type NzSizeDSType = 'default' | 'small'; diff --git a/components/core/util/convert.ts b/components/core/util/convert.ts index a801f3a0ebd..f153d60318a 100644 --- a/components/core/util/convert.ts +++ b/components/core/util/convert.ts @@ -25,18 +25,18 @@ export function toCssPixel(value: number | string): string { return coerceCssPixelValue(value); } +// tslint:disable no-any +// tslint:disable no-invalid-this + /** * Get the function-property type's value */ -// tslint:disable-next-line: no-any export function valueFunctionProp(prop: FunctionProp, ...args: any[]): T { return typeof prop === 'function' ? prop(...args) : prop; } -// tslint:disable-next-line: no-any function propDecoratorFactory(name: string, fallback: (v: T) => D): (target: any, propName: string) => void { - // tslint:disable-next-line: no-any - function propDecorator(target: any, propName: string): void { + function propDecorator(target: any, propName: string, originalDescriptor?: TypedPropertyDescriptor): any { const privatePropName = `$$__${propName}`; if (Object.prototype.hasOwnProperty.call(target, privatePropName)) { @@ -48,14 +48,19 @@ function propDecoratorFactory(name: string, fallback: (v: T) => D): (targe writable: true }); - Object.defineProperty(target, propName, { + return { get(): string { - return this[privatePropName]; // tslint:disable-line:no-invalid-this + return originalDescriptor && originalDescriptor.get + ? originalDescriptor.get.bind(this)() + : this[privatePropName]; }, set(value: T): void { - this[privatePropName] = fallback(value); // tslint:disable-line:no-invalid-this + if (originalDescriptor && originalDescriptor.set) { + originalDescriptor.set.bind(this)(fallback(value)); + } + this[privatePropName] = fallback(value); } - }); + }; } return propDecorator; @@ -77,17 +82,14 @@ function propDecoratorFactory(name: string, fallback: (v: T) => D): (targe * // __visible = false; * ``` */ -// tslint:disable-next-line: no-any export function InputBoolean(): any { return propDecoratorFactory('InputBoolean', toBoolean); } -// tslint:disable-next-line: no-any export function InputCssPixel(): any { return propDecoratorFactory('InputCssPixel', toCssPixel); } -// tslint:disable-next-line: no-any export function InputNumber(): any { // tslint:disable-line: no-any return propDecoratorFactory('InputNumber', toNumber); diff --git a/components/date-picker/lib/calendar/calendar-input.component.html b/components/date-picker/lib/calendar/calendar-input.component.html index 806f290f159..6b63514eb2f 100644 --- a/components/date-picker/lib/calendar/calendar-input.component.html +++ b/components/date-picker/lib/calendar/calendar-input.component.html @@ -8,7 +8,5 @@ #inputElement /> - - - - \ No newline at end of file + + diff --git a/components/date-picker/picker.component.html b/components/date-picker/picker.component.html index e743dfdb70c..de39fcd54c6 100644 --- a/components/date-picker/picker.component.html +++ b/components/date-picker/picker.component.html @@ -90,4 +90,4 @@ > - \ No newline at end of file + diff --git a/components/descriptions/doc/index.en-US.md b/components/descriptions/doc/index.en-US.md index ab8accc7215..bb635551453 100644 --- a/components/descriptions/doc/index.en-US.md +++ b/components/descriptions/doc/index.en-US.md @@ -23,13 +23,13 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'; ### nz-descriptions -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzTitle]` | Describe the title of the list, displayed at the top | `string\|TemplateRef` | `false` | -| `[nzBordered]` | Whether to display the border | `boolean` | `false` | -| `[nzColumn]` | The number of `nz-descriptions-item` in a row. It could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | -| `[nzSize]` | Set the size of the list. Only works when `nzBordered` is set | `'default' \| 'middle' \| 'small'` | `'default'` | -| `[nzColon]` | Show colon after title | `boolean` | `true` | +| `[nzBordered]` | Whether to display the border | `boolean` | `false` | ✅ | +| `[nzColumn]` | The number of `nz-descriptions-item` in a row. It could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | ✅ | +| `[nzSize]` | Set the size of the list. Only works when `nzBordered` is set | `'default' \| 'middle' \| 'small'` | `'default'` | ✅ | +| `[nzColon]` | Show colon after title | `boolean` | `true` | ✅ | ### nz-descriptions-item diff --git a/components/descriptions/doc/index.zh-CN.md b/components/descriptions/doc/index.zh-CN.md index add8607315d..934bf7f9bff 100644 --- a/components/descriptions/doc/index.zh-CN.md +++ b/components/descriptions/doc/index.zh-CN.md @@ -24,13 +24,13 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'; ### nz-descriptions -| 参数 | 说明 | 类型 | 默认值 | -| -------- | ----------- | ---- | ------- | +| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | +| -------- | ----------- | ---- | ------- | --- | | `[nzTitle]` | 描述列表的标题，显示在最顶部 | `string\|TemplateRef` | `false` | -| `[nzBordered]` | 是否展示边框 | `boolean` | `false` | -| `[nzColumn]` | 一行的 `nz-descriptions-item` 的数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | -| `[nzSize]` | 设置列表的大小（只有设置 `nzBordered` 时生效） | `'default' \| 'middle' \| 'small'` | `'default'` | -| `[nzColon]` | 在标题后显示冒号 | `boolean` | `true` | +| `[nzBordered]` | 是否展示边框 | `boolean` | `false` | ✅ | +| `[nzColumn]` | 一行的 `nz-descriptions-item` 的数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | ✅ | +| `[nzSize]` | 设置列表的大小（只有设置 `nzBordered` 时生效） | `'default' \| 'middle' \| 'small'` | `'default'` | ✅ | +| `[nzColon]` | 在标题后显示冒号 | `boolean` | `true` | ✅ | ### nz-descriptions-item diff --git a/components/descriptions/nz-descriptions.component.ts b/components/descriptions/nz-descriptions.component.ts index 1aa1d4f75c9..a66d4a964b5 100644 --- a/components/descriptions/nz-descriptions.component.ts +++ b/components/descriptions/nz-descriptions.component.ts @@ -25,11 +25,19 @@ import { import { merge, Subject } from 'rxjs'; import { auditTime, finalize, startWith, switchMap, takeUntil } from 'rxjs/operators'; -import { responsiveMap, warn, Breakpoint, InputBoolean, NzDomEventService } from 'ng-zorro-antd/core'; +import { + responsiveMap, + warn, + InputBoolean, + NzBreakpoint, + NzConfigService, + NzDomEventService, + WithConfig +} from 'ng-zorro-antd/core'; import { NzDescriptionsItemRenderProps, NzDescriptionsLayout, NzDescriptionsSize } from './nz-descriptions-definitions'; import { NzDescriptionsItemComponent } from './nz-descriptions-item.component'; -const defaultColumnMap: { [key in Breakpoint]: number } = { +const defaultColumnMap: { [key in NzBreakpoint]: number } = { xxl: 3, xl: 3, lg: 3, @@ -62,12 +70,12 @@ const defaultColumnMap: { [key in Breakpoint]: number } = { export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterContentInit { @ContentChildren(NzDescriptionsItemComponent) items: QueryList; - @Input() @InputBoolean() nzBordered = false; + @Input() @InputBoolean() @WithConfig(false) nzBordered: boolean; @Input() nzLayout: NzDescriptionsLayout = 'horizontal'; - @Input() nzColumn: number | { [key in Breakpoint]: number } = defaultColumnMap; - @Input() nzSize: NzDescriptionsSize = 'default'; + @Input() @WithConfig(defaultColumnMap) nzColumn: number | { [key in NzBreakpoint]: number }; + @Input() @WithConfig('default') nzSize: NzDescriptionsSize; @Input() nzTitle: string | TemplateRef = ''; - @Input() @InputBoolean() nzColon: boolean = true; + @Input() @WithConfig(true) @InputBoolean() nzColon: boolean; itemMatrix: NzDescriptionsItemRenderProps[][] = []; @@ -77,6 +85,7 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte private resize$ = new Subject(); constructor( + public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, private mediaMatcher: MediaMatcher, private platform: Platform, @@ -166,11 +175,11 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte this.itemMatrix = matrix; } - private matchMedia(): Breakpoint { - let bp: Breakpoint = Breakpoint.md; + private matchMedia(): NzBreakpoint { + let bp: NzBreakpoint = NzBreakpoint.md; Object.keys(responsiveMap).map((breakpoint: string) => { - const castBP = breakpoint as Breakpoint; + const castBP = breakpoint as NzBreakpoint; const matchBelow = this.mediaMatcher.matchMedia(responsiveMap[castBP]).matches; if (matchBelow) { bp = castBP; diff --git a/components/drawer/doc/index.en-US.md b/components/drawer/doc/index.en-US.md index 7e0ab44552a..82aa70b6110 100755 --- a/components/drawer/doc/index.en-US.md +++ b/components/drawer/doc/index.en-US.md @@ -25,11 +25,11 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer'; ### nz-drawer -| Props | Description | Type | Default | -| --- | --- | --- | --- | +| Props | Description | Type | Default | Global Config | +| --- | --- | --- | --- | --- | | `[nzClosable]` | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` | -| `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | -| `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | +| `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | ✅ | +| `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ | | `[nzKeyboard]` | Whether support press esc to close | `boolean` | `true` | | `[nzMaskStyle]` | Style for Drawer's mask element. | `object` | `{}` | | `[nzBodyStyle]` | Body style for drawer body element. Such as height, padding etc. | `object` | `{}` | @@ -99,4 +99,4 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer'; | nzZIndex| The `z-index` of the Drawer. | `number` | | nzPlacement | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | | nzOffsetX | The the X coordinate offset(px). | `number` | -| nzOffsetY | The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | \ No newline at end of file +| nzOffsetY | The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | diff --git a/components/drawer/doc/index.zh-CN.md b/components/drawer/doc/index.zh-CN.md index a82a688be2c..5fcc30fd8dd 100755 --- a/components/drawer/doc/index.zh-CN.md +++ b/components/drawer/doc/index.zh-CN.md @@ -24,13 +24,13 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer'; ### nz-drawer -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzClosable]` | 是否显示右上角的关闭按钮 | `boolean` | `true` | -| `[nzMaskClosable]` | 点击蒙层是否允许关闭 | `boolean` | `true` | -| `[nzMask]` | 是否展示遮罩 | `boolean` | `true` | -| `[nzKeyboard]` | 是否支持键盘esc关闭 | `boolean` | `true` | +| `[nzMaskClosable]` | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ | +| `[nzMask]` | 是否展示遮罩 | `boolean` | `true` | ✅ | | `[nzMaskStyle]` | 遮罩样式 | `object` | `{}` | +| `[nzKeyboard]` | 是否支持键盘 esc 关闭 | `boolean` | `true` | | `[nzBodyStyle]` | Drawer body 样式 | `object` | `{}` | | `[nzTitle]` | 标题 | `string \| TemplateRef` | - | | `[nzVisible]` | Drawer 是否可见 | `boolean` | - | @@ -99,4 +99,4 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer'; | nzZIndex| 设置 Drawer 的 `z-index` | `number` | | nzPlacement | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | | nzOffsetX | x 坐标移量(px) | `number` | -| nzOffsetY | y 坐标移量(px), 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` | \ No newline at end of file +| nzOffsetY | y 坐标移量(px), 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` | diff --git a/components/drawer/nz-drawer.component.html b/components/drawer/nz-drawer.component.html index 6b35a23f224..9963e23f7a5 100644 --- a/components/drawer/nz-drawer.component.html +++ b/components/drawer/nz-drawer.component.html @@ -37,4 +37,4 @@ - \ No newline at end of file + diff --git a/components/drawer/nz-drawer.component.ts b/components/drawer/nz-drawer.component.ts index 224688d0389..43a4ef5fce3 100644 --- a/components/drawer/nz-drawer.component.ts +++ b/components/drawer/nz-drawer.component.ts @@ -36,7 +36,7 @@ import { CdkPortalOutlet, ComponentPortal, PortalInjector, TemplatePortal } from import { Observable, Subject } from 'rxjs'; -import { toCssPixel, InputBoolean } from 'ng-zorro-antd/core'; +import { toCssPixel, InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core'; import { takeUntil } from 'rxjs/operators'; import { NzDrawerOptionsOfComponent, NzDrawerPlacement } from './nz-drawer-options'; import { NzDrawerRef } from './nz-drawer-ref'; @@ -54,9 +54,9 @@ export const DRAWER_ANIMATE_DURATION = 300; export class NzDrawerComponent extends NzDrawerRef implements OnInit, OnDestroy, AfterViewInit, OnChanges, NzDrawerOptionsOfComponent { @Input() nzContent: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef }> | Type; - @Input() @InputBoolean() nzClosable = true; - @Input() @InputBoolean() nzMaskClosable = true; - @Input() @InputBoolean() nzMask = true; + @Input() @InputBoolean() nzClosable: boolean = true; + @Input() @WithConfig(true) @InputBoolean() nzMaskClosable: boolean; + @Input() @WithConfig(true) @InputBoolean() nzMask: boolean; @Input() @InputBoolean() nzNoAnimation = false; @Input() @InputBoolean() nzKeyboard: boolean = true; @Input() nzTitle: string | TemplateRef<{}>; @@ -160,6 +160,7 @@ export class NzDrawerComponent extends NzDrawerRef constructor( // tslint:disable-next-line:no-any @Optional() @Inject(DOCUMENT) private document: any, + public nzConfigService: NzConfigService, private renderer: Renderer2, private overlay: Overlay, private injector: Injector, diff --git a/components/empty/demo/config.ts b/components/empty/demo/config.ts index 15f43b0611f..85f922d8d37 100644 --- a/components/empty/demo/config.ts +++ b/components/empty/demo/config.ts @@ -1,5 +1,5 @@ import { Component, TemplateRef, ViewChild } from '@angular/core'; -import { NzEmptyService } from 'ng-zorro-antd/empty'; +import { NzConfigService } from 'ng-zorro-antd/core'; @Component({ selector: 'nz-demo-empty-config', @@ -60,13 +60,13 @@ export class NzDemoEmptyConfigComponent { customize = false; - constructor(private nzEmptyService: NzEmptyService) {} + constructor(private nzConfigService: NzConfigService) {} onConfigChange(): void { if (this.customize) { - this.nzEmptyService.setDefaultContent(this.customTpl); // tslint:disable-line:no-any + this.nzConfigService.set('empty', { nzDefaultEmptyContent: this.customTpl }); } else { - this.nzEmptyService.resetDefault(); + this.nzConfigService.set('empty', { nzDefaultEmptyContent: undefined }); } } } diff --git a/components/empty/demo/module b/components/empty/demo/module index c32a9bce684..3c4909acfda 100644 --- a/components/empty/demo/module +++ b/components/empty/demo/module @@ -8,5 +8,18 @@ import { NzTableModule } from 'ng-zorro-antd/table'; import { NzListModule } from 'ng-zorro-antd/list'; import { NzTransferModule } from 'ng-zorro-antd/transfer'; import { NzButtonModule } from 'ng-zorro-antd/button'; +import { NzIconModule } from 'ng-zorro-antd/icon'; -export const moduleList = [ NzEmptyModule,NzSwitchModule, NzCascaderModule, NzDividerModule, NzTreeSelectModule, NzSelectModule, NzTableModule, NzTransferModule, NzListModule, NzButtonModule ]; +export const moduleList = [ + NzEmptyModule, + NzIconModule, + NzSwitchModule, + NzCascaderModule, + NzDividerModule, + NzTreeSelectModule, + NzSelectModule, + NzTableModule, + NzTransferModule, + NzListModule, + NzButtonModule +]; diff --git a/components/empty/doc/index.en-US.md b/components/empty/doc/index.en-US.md index c4d7dfc9062..848a87bf60b 100644 --- a/components/empty/doc/index.en-US.md +++ b/components/empty/doc/index.en-US.md @@ -29,12 +29,13 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty'; | `[nzNotFoundContent]` | Custom description | `string` \| `TemplateRef` | - | | `[nzNotFoundFooter]` | Custom Footer | `string` \| `TemplateRef` | - | -### NzEmptyService +### `NZ_CONFIG` -| Methods/Properties | Description | Parameters | -| -------- | ----------- | ---- | -| `setDefaultContent` | To set the default empty content. The parent component name would be passed to the template. | `TemplateRef` \| `string` | -| `resetDefault` | Reset default empty content | - | +The `nzEmpty` interface has properties as follows: + +| Properties | Description | Type | +| ----- | --- | ---- | +| `nzDefaultEmptyContent` | User default empty component. You can restore the system default empty content by providing `undefined` | `Type\|TemplateRef\|string\|undefined` | ### InjectionToken @@ -45,5 +46,5 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty'; ### Global Customizable Empty Content -You may notice or used some inputs like `nzNotFoundContent` in some components. Now they would use `Empty` component. And you can even render a user default empty component, either by providing a `NZ_DEFAULT_EMPTY_CONTENT` in your root module or invoke `setDefaultEmptyContent`. +You may notice or used some inputs like `nzNotFoundContent` in some components. Now they would use `Empty` component. So you can provide `nzDefaultEmptyContent` to customize them. diff --git a/components/empty/doc/index.zh-CN.md b/components/empty/doc/index.zh-CN.md index c0511a3c993..5695186f4cb 100644 --- a/components/empty/doc/index.zh-CN.md +++ b/components/empty/doc/index.zh-CN.md @@ -30,21 +30,21 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty'; | `[nzNotFoundContent]` | 自定义描述内容 | `string` \| `TemplateRef` | - | | `[nzNotFoundFooter]` | 设置自定义 footer | `string` \| `TemplateRef` | - | -### NzEmptyService +### `NZ_CONFIG` -| 属性/方法 | 说明 | 参数 | -| -------- | ----------- | ---- | -| `setDefaultEmptyContent` | 设置全局空内容，空组件的父组件名称将会被传递给模板 | `TemplateRef` \| `string` | -| `resetDefault` | 重置默认空内容 | - | +`nzEmpty` 接口有如下字段： + +| 参数 | 说明 | 类型 | +| ----- | --- | ---- | +| `nzDefaultEmptyContent` | 用户自定义的全局空组件，可通过 `undefined` 来取消自定义的全局空组件 | `Type\|TemplateRef\|string\|undefined` | ### InjectionToken | Token | 说明 | 参数 | | ----- | --- | ---- | -| `NZ_DEFAULT_EMPTY_CONTENT` | 提供一个用户自定义的空组件 | `Component` \| `string` | -| `NZ_EMPTY_COMPONENT_NAME` | 将会被注入到 `NZ_DEFAULT_EMPTY_CONTENT` 中，告诉该组件其父组件的名称 | `string` | +| `NZ_EMPTY_COMPONENT_NAME` | 将会被注入到用户的全局自定义空组件中，告诉该组件其所在组件的名称 | `string` | ### 全局自定义空组件 -你或许知道或者用过一些类似 `nzNotFoundContent` 的属性来自定义组件数据为空时的内容，现在它们都会使用 `Empty` 组件。你甚至可以通过提供在根模块中提供 `NZ_DEFAULT_EMPTY_CONTENT`，或者是调用 `setDefaultEmptyContent` 方法来定义一个自定义的全局空组件。 +你或许知道或者用过一些类似 `nzNotFoundContent` 的属性来自定义组件数据为空时的内容，现在它们都会使用 `Empty` 组件。你可以通过在 `NZ_CONFIG` 中提供 `{ nzEmpty: { nzDefaultEmptyContent } }` 来定义一个自定义的全局空组件。 diff --git a/components/empty/nz-empty.service.ts b/components/empty/nz-empty.service.ts index 16273d48d8a..c327b7d38dd 100644 --- a/components/empty/nz-empty.service.ts +++ b/components/empty/nz-empty.service.ts @@ -9,7 +9,7 @@ import { Inject, Injectable, Optional, TemplateRef, Type } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; -import { PREFIX } from 'ng-zorro-antd/core'; +import { warnDeprecation, NzConfigService, PREFIX } from 'ng-zorro-antd/core'; import { NzEmptyCustomContent, NZ_DEFAULT_EMPTY_CONTENT } from './nz-empty-config'; @@ -20,13 +20,32 @@ import { NzEmptyCustomContent, NZ_DEFAULT_EMPTY_CONTENT } from './nz-empty-confi export class NzEmptyService { userDefaultContent$ = new BehaviorSubject(undefined); - constructor(@Inject(NZ_DEFAULT_EMPTY_CONTENT) @Optional() private defaultEmptyContent: Type) { - if (this.defaultEmptyContent) { - this.userDefaultContent$.next(this.defaultEmptyContent); + constructor( + private nzConfigService: NzConfigService, + @Inject(NZ_DEFAULT_EMPTY_CONTENT) @Optional() private legacyDefaultEmptyContent: Type + ) { + if (legacyDefaultEmptyContent) { + warnDeprecation( + `'NZ_DEFAULT_EMPTY_CONTENT' is deprecated and would be removed in 9.0.0. Please migrate to 'NZ_CONFIG'.` + ); + } + + const userDefaultEmptyContent = this.getUserDefaultEmptyContent(); + + if (userDefaultEmptyContent) { + this.userDefaultContent$.next(userDefaultEmptyContent); } + + this.nzConfigService.getConfigChangeEventForComponent('empty').subscribe(() => { + this.userDefaultContent$.next(this.getUserDefaultEmptyContent()); + }); } setDefaultContent(content?: NzEmptyCustomContent): void { + warnDeprecation( + `'setDefaultContent' is deprecated and would be removed in 9.0.0. Please migrate to 'NzConfigService'.` + ); + if ( typeof content === 'string' || content === undefined || @@ -43,6 +62,16 @@ export class NzEmptyService { } resetDefault(): void { + warnDeprecation( + `'resetDefault' is deprecated and would be removed in 9.0.0. Please migrate to 'NzConfigService' and provide an 'undefined'.` + ); this.userDefaultContent$.next(undefined); } + + private getUserDefaultEmptyContent(): Type | TemplateRef | string { + return ( + (this.nzConfigService.getConfigForComponent('empty') || {}).nzDefaultEmptyContent || + this.legacyDefaultEmptyContent + ); + } } diff --git a/components/form/doc/index.en-US.md b/components/form/doc/index.en-US.md index fb7e49a7af5..82edf905764 100644 --- a/components/form/doc/index.en-US.md +++ b/components/form/doc/index.en-US.md @@ -54,10 +54,10 @@ import { NzFormModule } from 'ng-zorro-antd/form'; ### [nz-form] -| Property | Description | Type | Default Value | -| -------- | ----------- | ---- | ------------- | +| Property | Description | Type | Default Value | Global Config | +| -------- | ----------- | ---- | ------------- | ------------- | | `[nzLayout]`| Form layout | `'horizontal' \| 'vertical' \| 'inline'` | `'horizontal'` | -| `[nzNoColon]`| change default props `[nzNoColon]` value of `nz-form-label` | `boolean` | `false` | +| `[nzNoColon]`| change default props `[nzNoColon]` value of `nz-form-label` | `boolean` | `false` | ✅ | ### nz-form-item diff --git a/components/form/doc/index.zh-CN.md b/components/form/doc/index.zh-CN.md index b95faad0d39..540521f57d2 100644 --- a/components/form/doc/index.zh-CN.md +++ b/components/form/doc/index.zh-CN.md @@ -54,10 +54,10 @@ import { NzFormModule } from 'ng-zorro-antd/form'; ### [nz-form] -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzLayout]`| 表单布局 | `'horizontal' \| 'vertical' \| 'inline'` | `'horizontal'` | -| `[nzNoColon]`| 配置 `nz-form-label` 的 `[nzNoColon]` 的默认值 | `boolean` | `false` | +| `[nzNoColon]`| 配置 `nz-form-label` 的 `[nzNoColon]` 的默认值 | `boolean` | `false` | ✅ | ### nz-form-item diff --git a/components/form/nz-form.directive.ts b/components/form/nz-form.directive.ts index b79af077b67..73dda6e3188 100644 --- a/components/form/nz-form.directive.ts +++ b/components/form/nz-form.directive.ts @@ -22,7 +22,7 @@ import { import { Subject } from 'rxjs'; import { startWith, takeUntil } from 'rxjs/operators'; -import { InputBoolean, NzUpdateHostClassService } from 'ng-zorro-antd/core'; +import { InputBoolean, NzConfigService, NzUpdateHostClassService, WithConfig } from 'ng-zorro-antd/core'; import { NzFormLabelComponent } from './nz-form-label.component'; @@ -33,7 +33,7 @@ import { NzFormLabelComponent } from './nz-form-label.component'; }) export class NzFormDirective implements OnInit, OnChanges, AfterContentInit, OnDestroy { @Input() nzLayout = 'horizontal'; - @Input() @InputBoolean() nzNoColon: boolean = false; + @Input() @WithConfig(false) @InputBoolean() nzNoColon: boolean; @ContentChildren(NzFormLabelComponent, { descendants: true }) nzFormLabelComponent: QueryList; @@ -52,6 +52,7 @@ export class NzFormDirective implements OnInit, OnChanges, AfterContentInit, OnD } constructor( + public nzConfigService: NzConfigService, private elementRef: ElementRef, private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService diff --git a/components/grid/doc/index.en-US.md b/components/grid/doc/index.en-US.md index 236b475953f..c262e0e5188 100755 --- a/components/grid/doc/index.en-US.md +++ b/components/grid/doc/index.en-US.md @@ -91,12 +91,12 @@ import { NzGridModule } from 'ng-zorro-antd/grid'; ### [nz-row] -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzAlign]` | the vertical alignment of the flex layout | `'top' \| 'middle' \| 'bottom'` | `'top'` | -| `[nzGutter]` | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }` | `number \| object` | `0` | -| `[nzJustify]` | horizontal arrangement of the flex layout | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` | -| `[nzType]` | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | `'flex'` | - | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | +| `[nzAlign]` | the vertical alignment of the flex layout | `'top'\|'middle'\|'bottom'` | `'top'` | ✅ | +| `[nzGutter]` | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }` | `number\|object` | `0` | ✅ | +| `[nzJustify]` | horizontal arrangement of the flex layout | `'start'\|'end'\|'center'\|'space-around'\|'space-between'` | `'start'` | ✅ | +| `[nzType]` | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | `'flex'` | - | ✅ | ### [nz-col] diff --git a/components/grid/doc/index.zh-CN.md b/components/grid/doc/index.zh-CN.md index 1891f27861a..a89f500ee9c 100755 --- a/components/grid/doc/index.zh-CN.md +++ b/components/grid/doc/index.zh-CN.md @@ -90,12 +90,12 @@ import { NzGridModule } from 'ng-zorro-antd/grid'; ### [nz-row] -| 成员 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[nzAlign]` | flex 布局下的垂直对齐方式 | `'top' \| 'middle' \| 'bottom'` | `'top'` | -| `[nzGutter]` | 栅格间隔，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }` | `number \| object` | `0` | -| `[nzJustify]` | flex 布局下的水平排列方式 | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` | -| `[nzType]` | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | `'flex'` | - | +| 成员 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | +| `[nzAlign]` | flex 布局下的垂直对齐方式 | `'top' \| 'middle' \| 'bottom'` | `'top'` | ✅ | +| `[nzGutter]` | 栅格间隔，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }` | `number \| object` | `0` | ✅ | +| `[nzJustify]` | flex 布局下的水平排列方式 | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` | ✅ | +| `[nzType]` | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | `'flex'` | - | ✅ | ### [nz-col] diff --git a/components/grid/nz-row.directive.ts b/components/grid/nz-row.directive.ts index 217aba6293d..67656facb9b 100644 --- a/components/grid/nz-row.directive.ts +++ b/components/grid/nz-row.directive.ts @@ -23,8 +23,9 @@ import { MediaMatcher } from '@angular/cdk/layout'; import { Platform } from '@angular/cdk/platform'; import { responsiveMap, - Breakpoint, IndexableObject, + NzAlignType, + NzBreakPoint, NzDomEventService, NzUpdateHostClassService } from 'ng-zorro-antd/core'; @@ -32,8 +33,7 @@ import { Subject } from 'rxjs'; import { finalize, takeUntil } from 'rxjs/operators'; export type NzJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between'; -export type NzAlign = 'top' | 'middle' | 'bottom'; -export type NzType = 'flex' | null; +export type NzGridType = 'flex' | null; @Directive({ selector: '[nz-row],nz-row', @@ -41,13 +41,13 @@ export type NzType = 'flex' | null; providers: [NzUpdateHostClassService] }) export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy { - @Input() nzType: NzType; - @Input() nzAlign: NzAlign = 'top'; + @Input() nzType: NzGridType; + @Input() nzAlign: NzAlignType = 'top'; @Input() nzJustify: NzJustify = 'start'; @Input() nzGutter: number | IndexableObject; private el: HTMLElement = this.elementRef.nativeElement; private prefixCls = 'ant-row'; - private breakPoint: Breakpoint; + private breakPoint: NzBreakPoint; actualGutter: number; actualGutter$ = new Subject(); destroy$ = new Subject(); @@ -74,7 +74,7 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr watchMedia(): void { Object.keys(responsiveMap).map((screen: string) => { - const castBP = screen as Breakpoint; + const castBP = screen as NzBreakPoint; const matchBelow = this.mediaMatcher.matchMedia(responsiveMap[castBP]).matches; if (matchBelow) { this.breakPoint = castBP; diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md index 73aaa8934a3..8fa66458160 100755 --- a/components/icon/doc/index.en-US.md +++ b/components/icon/doc/index.en-US.md @@ -9,9 +9,7 @@ Semantic vector graphics. ## List of icons -> Click the icon and copy the code. - -We are still adding two-tone icons right now, syncing to [antd](https://ant.design/components/icon-cn/#components-icon-demo-iconfont). +We are still adding icons right now, syncing to [antd](https://ant.design/components/icon-cn/#components-icon-demo-iconfont). ## Import this Component Individually @@ -25,33 +23,31 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; ### [nz-icon] -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| --- | --- | --- | --- | --- | | `[nzType]` | Type of the ant design icon | `string` | - | -| `[nzTheme]` | Type of the ant design icon | `'fill' \| 'outline' \| 'twotone'` | `'outline'` | +| `[nzTheme]` | Type of the ant design icon | `'fill'\|'outline'\|'twotone'` | `'outline'` | ✅ | | `[nzSpin]` | Rotate icon with animation | `boolean` | `false` | -| `[nzTwotoneColor]` | Only support the two-tone icon. Specific the primary color. | `string (hex color)` | - | +| `[nzTwotoneColor]` | Only support the two-tone icon. Specific the primary color. | `string (hex color)` | - | ✅ | | `[nzIconfont]` | Type of the icon from iconfont | `string` | - | | `[nzRotate]` | Rotate degrees | `number` | - | -

API that is not started with nz and old API that is based on icon class names would be deprecated in 8.0.0. Please migrate.

+

API that is not started with nz and old API that is based on icon class names would be deprecated in 9.0.0. Please migrate.

### NzIconService -| Methods/Properties | Description | Parameters | -| ---------------------- | ------------------------------------------------------------------------------------------------ | --------------------------- | -| `twoToneColor` | To set the default primary color of twotone icons, use Ant Design's official blue by default | `TwoToneColorPaletteSetter` | -| `addIcon()` | To import icons statically | `IconDefinition` | -| `addIconLiteral()` | To statically import custom icons | `string`, `string (SVG)` | -| `fetchFromIconfont()` | To get icon assets from fonticon | `NzIconfontOption` | -| `changeAssetsSource()` | To change the location of your icon assets, so that you can deploy these icons wherever you want | `string` | +| Methods/Properties | Description | Parameters | +| --- | --- | --- | +| `addIcon()` | To import icons statically | `IconDefinition` | +| `addIconLiteral()` | To statically import custom icons | `string`, `string (SVG)` | +| `fetchFromIconfont()` | To get icon assets from fonticon | `NzIconfontOption` | +| `changeAssetsSource()` | To change the location of your icon assets, so that you can deploy these icons wherever you want | `string` | ### InjectionToken -| Token | Description | Parameters | -| ------------------------------- | -------------------------------------------------------------------------------------------- | -------------------------------- | -| `NZ_ICONS` | To import icons statically | `IconDefinition[]`, `useValue` | -| `NZ_ICON_DEFAULT_TWOTONE_COLOR` | To set the default primary color of twotone icons, use Ant Design's official blue by default | `string (hex color)`, `useValue` | +| Token | Description | Parameters | +| --- | --- | --- | +| `NZ_ICONS` | To import icons statically | `IconDefinition[]`, `useValue` | ### SVG icons @@ -67,7 +63,7 @@ You can join in [this dicussion of Ant Design](https://github.com/ant-design/ant NG-ZORRO hadn't provided an icon component. Instead, icon based on font files was provided. We make this new directive compatible to old API. If you make no changes to your existing code, old icons would be dynamically loaded as `outline` icons. But the best pratice is always to use `nz-icon` directive and specify the `theme` prop. ```html - + ``` All the icons will be rendered to ``, and styles and classes applied to `` would work. @@ -142,7 +138,7 @@ Please call this in component's constructor or `AppInitService`. ### Set Default TwoTone Color -When using the two-tone icons, you can change the property of `NzIconService` to specify the primary color: `this.iconService.twoToneColor = { primaryColor: '#1890ff' }`. +When using the two-tone icons, you provide a global configuration like `{ nzIcon: { nzTwotoneColor: 'xxx' } }` via `NzConfigService` or call corresponding `set` method to change two default twotone color. ### Custom Font Icon @@ -165,7 +161,7 @@ It create a component that uses SVG sprites in essence. The following option are available: | Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| --- | --- | --- | --- | | `scriptUrl` | The URL generated by iconfont.cn project. | `string` | - | The property scriptUrl should be set to import the svg sprite symbols. diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md index cd3b07595af..d112045eb6f 100755 --- a/components/icon/doc/index.zh-CN.md +++ b/components/icon/doc/index.zh-CN.md @@ -11,8 +11,6 @@ hasPageDemo: true ## 图标列表 -> 点击图标即可复制代码 - 新版图标可能略有缺失，我们将与 [Ant Design](https://ant.design/components/icon-cn/#components-icon-demo-iconfont) 同步保持图标的更新。 ## 单独引入此组件 @@ -27,33 +25,31 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; ### [nz-icon] -| 参数 | 说明 | 类型 | 默认值 | -| ---------------- | ------------------------------------------------------------ | ---------------------------- | --------- | -| `[nzType]` | 图标类型，遵循图标的命名规范 | string | - | -| `[nzTheme]` | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | `'fill'丨'outline'丨'twotone'` | `'outline'` | -| `[nzSpin]` | 是否有旋转动画 | `boolean` | `false` | -| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，仅对当前 icon 生效 | `string (十六进制颜色)` | - | -| `[nzIconfont]` | 指定来自 IconFont 的图标类型 | string | - | -| `[nzRotate]` | 图标旋转角度 | `number` | - | +| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | +| --- | --- | --- | --- | --- | +| `[nzType]`| 图标类型，遵循图标的命名规范 | string | - | +| `[nzTheme]` | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | `'fill'丨'outline'丨'twotone'` | `'outline'` | ✅ | +| `[nzSpin]` | 是否有旋转动画 | `boolean` | `false` | +| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色 | `string (十六进制颜色)` | - | ✅ | +| `[nzIconfont]` | 指定来自 IconFont 的图标类型 | string | - | +| `[nzRotate]` | 图标旋转角度（7.0.0 开始支持） | `number` | - | -

不加上 nz 前缀的 API，以及原使用 icon 类名的 API 将会在 8.0.0 及之后不被支持，请及时迁移。

+

不加上 nz 前缀的 API，以及原使用 icon 类名的 API 将会在 9.0.0 及之后不被支持，请及时迁移。

### NzIconService -| 方法/属性 | 说明 | 参数 | -| ---------------------- | ------------------------------------------------------------------------------------ | --------------------------- | -| `twoToneColor` | 用于设置双色图标的默认主题色，不设置即为 Ant Design 原生主题蓝色 | `TwoToneColorPaletteSetter` | -| `addIcon()` | 用于静态引入图标，可传入多个值（或者用数组解构赋值） | `IconDefinition` | -| `addIconLiteral()` | 用于静态引入用户自定义图标 | `string`, `string (SVG)` | -| `fetchFromIconfont()` | 用于从 FontIcon 获取图标资源文件 | `NzIconfontOption` | -| `changeAssetsSource()` | 用于修改动态加载 icon 的资源前缀，使得你可以部署图标资源到你想要的任何位置，例如 cdn | `string` | +| 方法/属性 | 说明 | 参数 | +| --- | --- | --- | +| `addIcon()` | 用于静态引入图标，可传入多个值（或者用数组解构赋值） | `IconDefinition` | +| `addIconLiteral()` | 用于静态引入用户自定义图标 | `string`, `string (SVG)` | +| `fetchFromIconfont()` | 用于从 FontIcon 获取图标资源文件 | `NzIconfontOption` | +| `changeAssetypescriptSource()` | 用于修改动态加载 icon 的资源前缀，使得你可以部署图标资源到你想要的任何位置，例如 cdn | `string` | ### InjectionToken -| Token | 说明 | 参数 | -| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------- | -| `NZ_ICONS` | 用于静态引入图标，传入数组 | `IconDefinition[]`, `useValue` | -| `NZ_ICON_DEFAULT_TWOTONE_COLOR` | 用于设置双色图标的默认主题色，不设置即为 Ant Design 原生主题蓝色 | `string (十六进制颜色)`, `useValue` | +| Token | 说明 | 参数 | +| --- | --- | --- | +| `NZ_ICONS` | 用于静态引入图标，传入数组 | `IconDefinition[]`, `useValue` | ### SVG 图标 @@ -69,7 +65,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解决方案。新版本中我们提供了旧 API 兼容，如果你不修改既有的代码，所有的图标都会被动态加载成 `outline` 主题的图标，而最佳实践是使用新的指令 `nz-icon` 并传入 `theme` 以明确图标的主题风格，例如： ```html - + ``` 所有的图标都会以 `` 标签渲染，但是你还是可以用之前对 i 标签设置的样式和类来控制 svg 的样式，例如： @@ -144,15 +140,13 @@ export class AppModule { ### 双色图标主色 -对于双色图标，可以通过修改 `this.iconService.twoToneColor = { primaryColor: '#1890ff' }` 来全局设置图标主色。你还可以访问这个属性获取当前的全局主色。还可以通过 `InjectionToken` 进行设置。 - -对于单个图标传入的参数有最高的优先级。 +对于双色图标，可以通过提供全局配置 `{ nzIcon: { nzTwotoneColor: 'xxx' } }` 或 `NzConfigService` 的对应方法修改来全局设置图标主色。 ### 自定义 font 图标 我们提供了一个 `fetchFromIconfont` 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。 -```ts +```typescript this._iconService.fetchFromIconfont({ scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' }); @@ -166,9 +160,9 @@ this._iconService.fetchFromIconfont({ `options` 的配置项如下： -| 参数 | 说明 | 类型 | 默认值 | -| ----------- | ---------------------------------------------------------------------------------------------- | ------ | ------ | -| `scriptUrl` | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| `scriptUrl` | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - | 在 scriptUrl 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。 diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts index 10bf4a2f7f2..2b63fe9054f 100644 --- a/components/icon/nz-icon.directive.ts +++ b/components/icon/nz-icon.directive.ts @@ -20,6 +20,8 @@ import { } from '@angular/core'; import { IconDirective, ThemeType } from '@ant-design/icons-angular'; import { warnDeprecation, InputBoolean } from 'ng-zorro-antd/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { NzIconService } from './nz-icon.service'; const iconTypeRE = /^anticon\-\w/; @@ -65,20 +67,26 @@ const normalizeType = (rawType: string): { type: string; crossError: boolean; ve exportAs: 'nzIcon' }) export class NzIconDirective extends IconDirective implements OnInit, OnChanges, OnDestroy, AfterContentChecked { - /** Properties with `nz` prefix. */ - @Input() @InputBoolean() set nzSpin(value: boolean) { + @Input() + @InputBoolean() + set nzSpin(value: boolean) { this.spin = value; } + @Input() nzRotate: number = 0; + @Input() set nzType(value: string) { this.type = value; } + @Input() set nzTheme(value: ThemeType) { this.theme = value; } + @Input() set nzTwotoneColor(value: string) { this.twoToneColor = value; } + @Input() set nzIconfont(value: string) { this.iconfont = value; } @@ -108,6 +116,7 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, private classNameObserver: MutationObserver; private el = this.elementRef.nativeElement; + private destroy$ = new Subject(); private _type: string; /** @@ -192,6 +201,12 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, ngOnChanges(changes: SimpleChanges): void { const { type, nzType, nzTwotoneColor, twoToneColor, spin, nzSpin, theme, nzTheme, nzRotate } = changes; + if (type && !nzType) { + warnDeprecation( + `APIs for Icon without 'nz' prefix are deprecated and will be removed in 9.0.0! Please check icons with this type: '${type.currentValue}'.` + ); + } + if (type || nzType || nzTwotoneColor || twoToneColor || spin || nzSpin || theme || nzTheme) { this.changeIcon2(); } else if (nzRotate) { @@ -227,12 +242,24 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, if (!this.el.classList.contains('anticon')) { this.renderer.setAttribute(this.el, 'class', `anticon ${this.el.className}`.trim()); } + + this.iconService.configUpdated$ + .asObservable() + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + if (this.type) { + this.changeIcon2(); + } + }); } ngOnDestroy(): void { if (this.classNameObserver) { this.classNameObserver.disconnect(); } + + this.destroy$.next(); + this.destroy$.complete(); } /** diff --git a/components/icon/nz-icon.service.ts b/components/icon/nz-icon.service.ts index 81f86eec115..0f85131ec61 100644 --- a/components/icon/nz-icon.service.ts +++ b/components/icon/nz-icon.service.ts @@ -49,15 +49,19 @@ import { UploadOutline, UpOutline } from '@ant-design/icons-angular/icons'; -import { warn, warnDeprecation } from 'ng-zorro-antd/core'; +import { trimComponentName, warn, warnDeprecation, IconConfig, NzConfigService } from 'ng-zorro-antd/core'; +import { Subject } from 'rxjs'; export interface NzIconfontOption { scriptUrl: string; } export const NZ_ICONS = new InjectionToken('nz_icons'); + export const NZ_ICON_DEFAULT_TWOTONE_COLOR = new InjectionToken('nz_icon_default_twotone_color'); + export const DEFAULT_TWOTONE_COLOR = '#1890ff'; + export const NZ_ICONS_USED_BY_ZORRO: IconDefinition[] = [ BarsOutline, CalendarOutline, @@ -105,6 +109,8 @@ export const NZ_ICONS_USED_BY_ZORRO: IconDefinition[] = [ providedIn: 'root' }) export class NzIconService extends IconService { + configUpdated$ = new Subject(); + private iconfontCache = new Set(); warnAPI(type: 'old' | 'cross' | 'vertical'): void { @@ -152,24 +158,64 @@ export class NzIconService extends IconService { constructor( rendererFactory: RendererFactory2, sanitizer: DomSanitizer, - @Optional() @Inject(NZ_ICONS) private icons: IconDefinition[], - @Optional() @Inject(NZ_ICON_DEFAULT_TWOTONE_COLOR) private defaultColor: string, + protected nzConfigService: NzConfigService, @Optional() handler: HttpBackend, // tslint:disable-next-line:no-any - @Optional() @Inject(DOCUMENT) document: any + @Optional() @Inject(DOCUMENT) _document: any, + @Optional() @Inject(NZ_ICONS) icons?: IconDefinition[], + /** + * @deprecated + * @inner + */ + @Optional() @Inject(NZ_ICON_DEFAULT_TWOTONE_COLOR) private legacyDefaultTwotoneColor?: string ) { - super(rendererFactory, handler, document, sanitizer); + super(rendererFactory, handler, _document, sanitizer); + + this.onConfigChange(); + + this.addIcon(...NZ_ICONS_USED_BY_ZORRO, ...(icons || [])); + + if (legacyDefaultTwotoneColor) { + warnDeprecation( + `'NZ_ICON_DEFAULT_TWOTONE_COLOR' is deprecated and will be removed in 9.0.0. Please use 'NZ_CONFIG' instead!` + ); + } + this.configDefaultTwotoneColor(); - this.addIcon(...NZ_ICONS_USED_BY_ZORRO, ...(this.icons || [])); + this.configDefaultTheme(); + } + + private onConfigChange(): void { + this.nzConfigService.getConfigChangeEventForComponent(trimComponentName(this.constructor.name)).subscribe(() => { + this.configDefaultTwotoneColor(); + this.configDefaultTheme(); + this.configUpdated$.next(); + }); + } + + private configDefaultTheme(): void { + const iconConfig = this.getConfig(); + this.defaultTheme = iconConfig.nzTheme || 'outline'; + } + + private configDefaultTwotoneColor(): void { + const iconConfig = this.getConfig(); + const defaultTwotoneColor = iconConfig.nzTwotoneColor || this.legacyDefaultTwotoneColor; let primaryColor = DEFAULT_TWOTONE_COLOR; - if (this.defaultColor) { - if (this.defaultColor.startsWith('#')) { - primaryColor = this.defaultColor; + + if (defaultTwotoneColor) { + if (defaultTwotoneColor.startsWith('#')) { + primaryColor = defaultTwotoneColor; } else { warn('Twotone color must be a hex color!'); } } + this.twoToneColor = { primaryColor }; } + + private getConfig(): IconConfig { + return (this.nzConfigService.getConfigForComponent(trimComponentName(this.constructor.name)) as IconConfig) || {}; + } } diff --git a/components/icon/nz-icon.spec.ts b/components/icon/nz-icon.spec.ts index fe86472fad4..07d28e3d6b4 100644 --- a/components/icon/nz-icon.spec.ts +++ b/components/icon/nz-icon.spec.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component, DebugElement } from '@angular/core'; -import { async, fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, fakeAsync, inject, tick, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { LeftOutline, @@ -11,6 +11,8 @@ import { RightOutline } from '@ant-design/icons-angular/icons'; +import { NzConfigService } from 'ng-zorro-antd/core'; + import { NzIconDirective } from './nz-icon.directive'; import { NzIconModule } from './nz-icon.module'; import { NzIconService, NZ_ICON_DEFAULT_TWOTONE_COLOR, NZ_ICONS } from './nz-icon.service'; @@ -171,6 +173,9 @@ describe('nz icon', () => { })); }); + /** + * @deprecated Would be removed in 9.0.0. + */ describe('old api', () => { let fixture: ComponentFixture; let icons: DebugElement[]; @@ -187,6 +192,9 @@ describe('nz icon', () => { }); }); + /** + * @deprecated Would be removed in 9.0.0. + */ describe('prefix', () => { let fixture: ComponentFixture; let icons: DebugElement[]; @@ -205,6 +213,42 @@ describe('nz icon', () => { }); }); +describe('nz config service', () => { + let fixture: ComponentFixture; + let nzConfigService: NzConfigService; + let icons: DebugElement[]; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [CommonModule, NzIconModule], + declarations: [NzTestIconExtensionsComponent], + providers: [ + { + provide: NZ_ICONS, + useValue: [LeftOutline, RightOutline, QuestionOutline] + } + ] + }); + + fixture = TestBed.createComponent(NzTestIconExtensionsComponent); + fixture.detectChanges(); + icons = fixture.debugElement.queryAll(By.directive(NzIconDirective)); + }); + + beforeEach(inject([NzConfigService], (c: NzConfigService) => { + nzConfigService = c; + })); + + it('should support config service', () => { + nzConfigService!.set('icon', { nzTwotoneColor: '234567' }); + expect(icons[0].componentInstance._iconService.twoToneColor.primaryColor).not.toBe('234567'); + expect(icons[0].componentInstance._iconService.twoToneColor.primaryColor).toBe('#1890ff'); + }); +}); + +/** + * @deprecated This API is not going to be provided in 9.0.0. + */ describe('nz icon twotone color injection', () => { let fixture: ComponentFixture; let icons: DebugElement[]; diff --git a/components/icon/page/index.ts b/components/icon/page/index.ts index d8e28e91926..d0d28a33b57 100644 --- a/components/icon/page/index.ts +++ b/components/icon/page/index.ts @@ -281,7 +281,7 @@ const newIconNames: string[] = [

{{ localeObj[category] }}

  • - + {{ icon }} diff --git a/components/input-number/nz-input-number.component.html b/components/input-number/nz-input-number.component.html index c4825c7f06b..e609607164b 100644 --- a/components/input-number/nz-input-number.component.html +++ b/components/input-number/nz-input-number.component.html @@ -30,4 +30,4 @@ (keyup)="onKeyUp()" [ngModel]="displayValue" (ngModelChange)="onModelChange($event)"> - \ No newline at end of file + diff --git a/components/layout/nz-sider.component.ts b/components/layout/nz-sider.component.ts index 2f5a0aa921f..04c9a799bf8 100644 --- a/components/layout/nz-sider.component.ts +++ b/components/layout/nz-sider.component.ts @@ -31,12 +31,10 @@ import { Platform } from '@angular/cdk/platform'; import { Subject } from 'rxjs'; import { finalize, takeUntil } from 'rxjs/operators'; -import { toCssPixel, InputBoolean, NzDomEventService } from 'ng-zorro-antd/core'; +import { toCssPixel, InputBoolean, NzBreakPoint, NzDomEventService } from 'ng-zorro-antd/core'; import { NzLayoutComponent } from './nz-layout.component'; -export type NzBreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; - @Component({ selector: 'nz-sider', exportAs: 'nzSider', diff --git a/components/menu/nz-submenu.component.html b/components/menu/nz-submenu.component.html index d33e367fba9..2e3fa662503 100644 --- a/components/menu/nz-submenu.component.html +++ b/components/menu/nz-submenu.component.html @@ -56,4 +56,4 @@ - \ No newline at end of file + diff --git a/components/message/nz-message-base.service.ts b/components/message/nz-message-base.service.ts index 1d587058075..06f5444347b 100644 --- a/components/message/nz-message-base.service.ts +++ b/components/message/nz-message-base.service.ts @@ -10,7 +10,7 @@ import { Overlay } from '@angular/cdk/overlay'; import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injector, Type } from '@angular/core'; import { NzSingletonService } from 'ng-zorro-antd/core'; -import { NzMessageConfig } from './nz-message-config'; +import { NzMessageConfigLegacy } from './nz-message-config'; import { NzMessageContainerComponent } from './nz-message-container.component'; import { NzMessageData, NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definitions'; @@ -19,7 +19,7 @@ let globalCounter = 0; export class NzMessageBaseService< ContainerClass extends NzMessageContainerComponent, MessageData, - MessageConfig extends NzMessageConfig + MessageConfig extends NzMessageConfigLegacy > { protected _container: ContainerClass; diff --git a/components/message/nz-message-config.ts b/components/message/nz-message-config.ts index 496745adf4a..b1e657e10c2 100644 --- a/components/message/nz-message-config.ts +++ b/components/message/nz-message-config.ts @@ -8,19 +8,23 @@ import { InjectionToken } from '@angular/core'; -export interface NzMessageConfig { +/** + * @deprecated This interface has been removed to `ng-zorro-antd/core`. Please migrate to that. + */ +export interface NzMessageConfigLegacy { nzAnimate?: boolean; nzDuration?: number; nzMaxStack?: number; nzPauseOnHover?: boolean; nzTop?: number | string; - - [index: string]: any; // tslint:disable-line:no-any } -export const NZ_MESSAGE_DEFAULT_CONFIG = new InjectionToken('NZ_MESSAGE_DEFAULT_CONFIG'); +export const NZ_MESSAGE_DEFAULT_CONFIG = new InjectionToken('NZ_MESSAGE_DEFAULT_CONFIG'); -export const NZ_MESSAGE_CONFIG = new InjectionToken('NZ_MESSAGE_CONFIG'); +/** + * @deprecated 9.0.0 - Injection token 'NZ_MESSAGE_CONFIG' is deprecated and will be removed in 9.0.0. Please use 'NzConfigService' instead. + */ +export const NZ_MESSAGE_CONFIG = new InjectionToken('NZ_MESSAGE_CONFIG'); export const NZ_MESSAGE_DEFAULT_CONFIG_PROVIDER = { provide: NZ_MESSAGE_DEFAULT_CONFIG, diff --git a/components/message/nz-message-container.component.ts b/components/message/nz-message-container.component.ts index 7956d82a983..ebbadb81518 100644 --- a/components/message/nz-message-container.component.ts +++ b/components/message/nz-message-container.component.ts @@ -11,14 +11,15 @@ import { ChangeDetectorRef, Component, Inject, + OnInit, Optional, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; -import { toCssPixel } from 'ng-zorro-antd/core'; +import { toCssPixel, trimComponentName, warnDeprecation, NzConfigService } from 'ng-zorro-antd/core'; -import { NzMessageConfig, NZ_MESSAGE_CONFIG, NZ_MESSAGE_DEFAULT_CONFIG } from './nz-message-config'; +import { NzMessageConfigLegacy, NZ_MESSAGE_CONFIG, NZ_MESSAGE_DEFAULT_CONFIG } from './nz-message-config'; import { NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definitions'; @Component({ @@ -29,21 +30,31 @@ import { NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definiti preserveWhitespaces: false, templateUrl: './nz-message-container.component.html' }) -export class NzMessageContainerComponent { +export class NzMessageContainerComponent implements OnInit { messages: NzMessageDataFilled[] = []; - config: Required; + config: Required; top: string | null; constructor( protected cdr: ChangeDetectorRef, - @Optional() @Inject(NZ_MESSAGE_DEFAULT_CONFIG) defaultConfig: NzMessageConfig, - @Optional() @Inject(NZ_MESSAGE_CONFIG) config: NzMessageConfig + protected nzConfigService: NzConfigService, + @Optional() @Inject(NZ_MESSAGE_DEFAULT_CONFIG) defaultConfig: NzMessageConfigLegacy, + @Optional() @Inject(NZ_MESSAGE_CONFIG) config: NzMessageConfigLegacy ) { + if (!!config) { + warnDeprecation( + `Injection token 'NZ_MESSAGE_CONFIG' is deprecated and will be removed in 9.0.0. Please use 'NzConfigService' instead.` + ); + } this.setConfig({ ...defaultConfig, ...config }); } - setConfig(config: NzMessageConfig): void { - this.config = { ...this.config, ...config }; + ngOnInit(): void { + this.subscribeConfigChange(); + } + + setConfig(config?: NzMessageConfigLegacy): void { + this.config = this.mergeMessageConfig(config); this.top = toCssPixel(this.config.nzTop); this.cdr.markForCheck(); } @@ -88,6 +99,20 @@ export class NzMessageContainerComponent { this.cdr.detectChanges(); } + protected subscribeConfigChange(): void { + this.nzConfigService + .getConfigChangeEventForComponent(trimComponentName(this.constructor.name)) + .subscribe(() => this.setConfig()); + } + + protected mergeMessageConfig(config?: NzMessageConfigLegacy): Required { + return { + ...this.config, + ...config, + ...this.nzConfigService.getConfigForComponent(trimComponentName(this.constructor.name)) + }; + } + /** * Merge default options and custom message options * @param options diff --git a/components/message/nz-message.service.ts b/components/message/nz-message.service.ts index b91818b0453..c777725ef3f 100644 --- a/components/message/nz-message.service.ts +++ b/components/message/nz-message.service.ts @@ -11,7 +11,7 @@ import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector, Templat import { NzSingletonService } from 'ng-zorro-antd/core'; import { NzMessageBaseService } from './nz-message-base.service'; -import { NzMessageConfig } from './nz-message-config'; +import { NzMessageConfigLegacy } from './nz-message-config'; import { NzMessageContainerComponent } from './nz-message-container.component'; import { NzMessageData, NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definitions'; import { NzMessageServiceModule } from './nz-message.service.module'; @@ -22,7 +22,7 @@ import { NzMessageServiceModule } from './nz-message.service.module'; export class NzMessageService extends NzMessageBaseService< NzMessageContainerComponent, NzMessageData, - NzMessageConfig + NzMessageConfigLegacy > { constructor( nzSingletonService: NzSingletonService, diff --git a/components/message/nz-message.spec.ts b/components/message/nz-message.spec.ts index acbd92724ca..e0eb664196d 100644 --- a/components/message/nz-message.spec.ts +++ b/components/message/nz-message.spec.ts @@ -3,7 +3,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core'; import { fakeAsync, inject, tick, ComponentFixture, TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { dispatchMouseEvent } from 'ng-zorro-antd/core'; +import { dispatchMouseEvent, NzConfigService } from 'ng-zorro-antd/core'; import { NZ_MESSAGE_CONFIG } from './nz-message-config'; import { NzMessageModule } from './nz-message.module'; @@ -14,6 +14,7 @@ describe('NzMessage', () => { let overlayContainerElement: HTMLElement; let fixture: ComponentFixture; let testComponent: NzTestMessageBasicComponent; + let nzConfigService: NzConfigService; beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ @@ -32,6 +33,10 @@ describe('NzMessage', () => { } })); + beforeEach(inject([NzConfigService], (c: NzConfigService) => { + nzConfigService = c; + })); + afterEach(() => { messageService.remove(); }); @@ -156,11 +161,22 @@ describe('NzMessage', () => { expect(overlayContainerElement.textContent).not.toContain('EXISTS'); })); + /** + * @deprecated This test is going to be removed in 9.0.0 + */ it('should reset default config dynamically', fakeAsync(() => { messageService.config({ nzDuration: 0 }); messageService.create('loading', 'EXISTS'); fixture.detectChanges(); - tick(1000); + tick(10000); + expect(overlayContainerElement.textContent).toContain('EXISTS'); + })); + + it('should reset default config from config service', fakeAsync(() => { + nzConfigService.set('message', { nzDuration: 0 }); + messageService.create('loading', 'EXISTS'); + fixture.detectChanges(); + tick(10000); expect(overlayContainerElement.textContent).toContain('EXISTS'); })); diff --git a/components/modal/doc/index.en-US.md b/components/modal/doc/index.en-US.md index 2ccebb819c9..0a14f5ad429 100644 --- a/components/modal/doc/index.en-US.md +++ b/components/modal/doc/index.en-US.md @@ -44,8 +44,8 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod | nzFooter | Footer content, set as footer=null when you don't need default buttons. 1. Only valid in normal mode.
    2. You can customize the buttons to the maximum extent by passing a `ModalButtonOptions` configuration (see the case or the instructions below).     | string
    TemplateRef
    ModalButtonOptions | OK and Cancel buttons | | nzGetContainer | The mount node for Modal | HTMLElement / () => HTMLElement| A default container | | nzKeyboard | Whether support press esc to close | `boolean` | `true` | -| nzMask | Whether show mask or not. | `boolean` | `true` | -| nzMaskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | `boolean` | `true` | +| nzMask | Whether show mask or not. | `boolean` | `true` | ✅ | +| nzMaskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | `boolean` | `true` | ✅ | | nzMaskStyle | Style for modal's mask element. | `object` | - | | nzOkText | Text of the OK button. Set to null to show no ok button (this value is invalid if the nzFooter parameter is used in normal mode) | `string` | OK | | nzOkType | Button type of the OK button. Consistent with the type of the `nz-button`. | `string` | primary | @@ -129,31 +129,7 @@ The dialog created by the service method `NzModalService.xxx()` will return a `N | triggerOk() | Manually trigger nzOnOk | | triggerCancel() | Manually trigger nzOnCancel | - -### Global Configuration - -Global Configuration（NZ_MODAL_CONFIG） - -if your want to set global configuration, you can use the value of provide `NZ_MODAL_CONFIG` to accomplish it. -(eg, add `{ provide: NZ_MODAL_CONFIG, useValue: { nzMask: false }}` to `providers` of your module, you can import `NZ_MODAL_CONFIG` from `ng-zorro-antd`) - -The weight of global configuration, component default value, component input value: - -component input value > global configuration > component default value - -supported global configuration item -```ts -{ - provide: NZ_MODAL_CONFIG, - useValue: { - nzMask?: boolean; // Whether show mask or not. - nzMaskClosable?: boolean; // Whether to close the modal dialog when the mask (area outside the modal) is clicked - } -} -``` -> Note: global configuration does not have default value which component has it. - -#### ModalButtonOptions (used to customize the bottom button) +### ModalButtonOptions (used to customize the bottom button) An array of `ModalButtonOptions` type can be passed to `nzFooter` for custom bottom buttons. @@ -198,4 +174,4 @@ Another way to customize the footer button. -``` \ No newline at end of file +``` diff --git a/components/modal/doc/index.zh-CN.md b/components/modal/doc/index.zh-CN.md index a3a27f75e77..ebd3e9dfcc3 100644 --- a/components/modal/doc/index.zh-CN.md +++ b/components/modal/doc/index.zh-CN.md @@ -31,8 +31,8 @@ import { NzModalModule } from 'ng-zorro-antd/modal'; 对话框当前分为2种模式，`普通模式` 和 `确认框模式`（即`Confirm`对话框，通过调用`confirm/info/success/error/warning`弹出），两种模式对API的支持程度稍有不同。 -| 参数 | 说明 | 类型 | 默认值 | -|----|----|----|----| +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | nzAfterOpen | Modal 打开后的回调 | EventEmitter | - | | nzAfterClose | Modal 完全关闭后的回调，可监听close/destroy方法传入的参数 | EventEmitter | - | | nzBodyStyle | Modal body 样式 | `object` | - | @@ -45,8 +45,8 @@ import { NzModalModule } from 'ng-zorro-antd/modal'; | nzFooter | 底部内容。1. 仅在普通模式下有效。
    2. 可通过传入 ModalButtonOptions 来最大程度自定义按钮（详见案例或下方说明）。
    3. 当不需要底部时，可以设为 null     | string
    TemplateRef
    ModalButtonOptions | 默认的确定取消按钮 | | nzGetContainer | 指定 Modal 挂载的 HTML 节点 | HTMLElement
    () => HTMLElement| 默认容器 | | nzKeyboard | 是否支持键盘esc关闭 | `boolean` | `true` | -| nzMask | 是否展示遮罩 | `boolean` | `true` | -| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | +| nzMask | 是否展示遮罩 | `boolean` | `true` | ✅ | +| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ | | nzMaskStyle | 遮罩样式 | `object` | - | | nzOkText | 确认按钮文字。设为 null 表示不显示确认按钮（若在普通模式下使用了 nzFooter 参数，则该值无效） | `string` | 确定 | | nzOkType | 确认按钮类型。与button的type类型值一致 | `string` | primary | @@ -129,30 +129,7 @@ constructor(modal: NzModalService) { | triggerOk() | 手动触发nzOnOk | | triggerCancel() | 手动触发nzOnCancel | - -### 全局配置 - -全局配置（NZ_MODAL_CONFIG） -如果要进行全局默认配置，你可以设置提供商 `NZ_MODAL_CONFIG` 的值来实现。 -（如：在你的模块的`providers`中加入 `{ provide: NZ_MODAL_CONFIG, useValue: { nzMask: false }}`，`NZ_MODAL_CONFIG` 可以从 `ng-zorro-antd` 中导入） - -全局配置，组件默认值，组件层级配置之间的权重如下： - -组件层级配置 > 全局配置 > 组件默认值 - -当前支持的全局配置 -```ts -{ - provide: NZ_MODAL_CONFIG, - useValue: { - nzMask?: boolean; // 是否展示遮罩 - nzMaskClosable?: boolean; // 点击蒙层是否允许关闭 - } -} -``` -注：全局配置并无默认值，因为nzMask和nzMaskClosable默认值存在于组件中 - -#### ModalButtonOptions（用于自定义底部按钮） +### ModalButtonOptions（用于自定义底部按钮） 可将此类型数组传入 `nzFooter`，用于自定义底部按钮。 @@ -197,4 +174,4 @@ nzFooter: [{ -``` \ No newline at end of file +``` diff --git a/components/modal/nz-modal.component.ts b/components/modal/nz-modal.component.ts index a1c0485275c..5ec778d6c0b 100644 --- a/components/modal/nz-modal.component.ts +++ b/components/modal/nz-modal.component.ts @@ -39,7 +39,14 @@ import { import { fromEvent, Observable, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { getElementOffset, isPromise, InputBoolean } from 'ng-zorro-antd/core'; +import { + getElementOffset, + isPromise, + warnDeprecation, + InputBoolean, + NzConfigService, + WithConfig +} from 'ng-zorro-antd/core'; import { NzI18nService } from 'ng-zorro-antd/i18n'; import { NzModalConfig, NZ_MODAL_CONFIG } from './nz-modal-config'; @@ -72,8 +79,11 @@ export class NzModalComponent extends NzModalRef @Input() @InputBoolean() nzCancelLoading: boolean = false; @Input() @InputBoolean() nzKeyboard: boolean = true; @Input() @InputBoolean() nzNoAnimation = false; - @Input() @InputBoolean() nzMask: boolean; - @Input() @InputBoolean() nzMaskClosable: boolean; + + // TODO(hsuanxyz): add default value once old API is deprecated. + @Input() @WithConfig() @InputBoolean() nzMask: boolean; + @Input() @WithConfig() @InputBoolean() nzMaskClosable: boolean; + @Input() nzContent: string | TemplateRef<{}> | Type; // [STATIC] If not specified, will use @Input() nzComponentParams: T; // [STATIC] ONLY avaliable when nzContent is a component @Input() nzFooter: string | TemplateRef<{}> | Array> | null; // [STATIC] Default Modal ONLY @@ -186,6 +196,7 @@ export class NzModalComponent extends NzModalRef [key: string]: any; // tslint:disable-line:no-any constructor( + public nzConfigService: NzConfigService, private overlay: Overlay, private overlayKeyboardDispatcher: OverlayKeyboardDispatcher, private i18n: NzI18nService, @@ -200,6 +211,10 @@ export class NzModalComponent extends NzModalRef ) { super(); this.scrollStrategy = this.overlay.scrollStrategies.block(); + + if (this.nzModalGlobalConfig) { + warnDeprecation('`NZ_MODAL_CONFIG` has been deprecated and will be removed in 9.0.0. Please use global config instead.') + } } ngOnInit(): void { diff --git a/components/notification/nz-notification-config.ts b/components/notification/nz-notification-config.ts index b131d645d18..22f08a5cd8f 100644 --- a/components/notification/nz-notification-config.ts +++ b/components/notification/nz-notification-config.ts @@ -8,19 +8,22 @@ import { InjectionToken } from '@angular/core'; -import { NzMessageConfig } from 'ng-zorro-antd/message'; +import { NzMessageConfigLegacy } from 'ng-zorro-antd/message'; -export interface NzNotificationConfig extends NzMessageConfig { +/** + * @deprecated This interface would has been moved to `ng-zorro-antd/core`. Please migrate to that. + */ +export interface NzNotificationConfigLegacy extends NzMessageConfigLegacy { nzTop?: string | number; nzBottom?: string | number; nzPlacement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | string; } -export const NZ_NOTIFICATION_DEFAULT_CONFIG = new InjectionToken( +export const NZ_NOTIFICATION_DEFAULT_CONFIG = new InjectionToken( 'NZ_NOTIFICATION_DEFAULT_CONFIG' ); -export const NZ_NOTIFICATION_CONFIG = new InjectionToken('NZ_NOTIFICATION_CONFIG'); +export const NZ_NOTIFICATION_CONFIG = new InjectionToken('NZ_NOTIFICATION_CONFIG'); export const NZ_NOTIFICATION_DEFAULT_CONFIG_PROVIDER = { provide: NZ_NOTIFICATION_DEFAULT_CONFIG, diff --git a/components/notification/nz-notification-container.component.ts b/components/notification/nz-notification-container.component.ts index 06a6f69ffe0..4b533837448 100644 --- a/components/notification/nz-notification-container.component.ts +++ b/components/notification/nz-notification-container.component.ts @@ -16,10 +16,14 @@ import { } from '@angular/core'; import { Subject } from 'rxjs'; -import { toCssPixel } from 'ng-zorro-antd/core'; +import { toCssPixel, trimComponentName, warnDeprecation, NzConfigService } from 'ng-zorro-antd/core'; import { NzMessageContainerComponent } from 'ng-zorro-antd/message'; -import { NzNotificationConfig, NZ_NOTIFICATION_CONFIG, NZ_NOTIFICATION_DEFAULT_CONFIG } from './nz-notification-config'; +import { + NzNotificationConfigLegacy, + NZ_NOTIFICATION_CONFIG, + NZ_NOTIFICATION_DEFAULT_CONFIG +} from './nz-notification-config'; import { NzNotificationDataFilled, NzNotificationDataOptions } from './nz-notification.definitions'; @Component({ @@ -31,7 +35,7 @@ import { NzNotificationDataFilled, NzNotificationDataOptions } from './nz-notifi templateUrl: './nz-notification-container.component.html' }) export class NzNotificationContainerComponent extends NzMessageContainerComponent { - config: Required; + config: Required; bottom: string | null; /** @@ -41,17 +45,27 @@ export class NzNotificationContainerComponent extends NzMessageContainerComponen constructor( cdr: ChangeDetectorRef, - @Optional() @Inject(NZ_NOTIFICATION_DEFAULT_CONFIG) defaultConfig: NzNotificationConfig, - @Optional() @Inject(NZ_NOTIFICATION_CONFIG) config: NzNotificationConfig + nzConfigService: NzConfigService, + @Optional() @Inject(NZ_NOTIFICATION_DEFAULT_CONFIG) defaultConfig: NzNotificationConfigLegacy, + @Optional() @Inject(NZ_NOTIFICATION_CONFIG) config: NzNotificationConfigLegacy ) { - super(cdr, defaultConfig, config); + super(cdr, nzConfigService, defaultConfig, config); + if (!!config) { + warnDeprecation( + `Injection token 'NZ_NOTIFICATION_CONFIG' is deprecated and will be removed in 9.0.0. Please use 'NzConfigService' instead.` + ); + } } /** * @override */ - setConfig(config: NzNotificationConfig): void { - const newConfig = (this.config = { ...this.config, ...config }); + setConfig(config?: NzNotificationConfigLegacy): void { + const newConfig = (this.config = { + ...this.config, + ...config, + ...this.nzConfigService.getConfigForComponent(trimComponentName(this.constructor.name)) + }); const placement = this.config.nzPlacement; this.top = placement === 'topLeft' || placement === 'topRight' ? toCssPixel(newConfig.nzTop) : null; @@ -86,6 +100,15 @@ export class NzNotificationContainerComponent extends NzMessageContainerComponen this.cdr.detectChanges(); } + /** + * @override + */ + protected subscribeConfigChange(): void { + this.nzConfigService + .getConfigChangeEventForComponent(trimComponentName(this.constructor.name)) + .subscribe(() => this.setConfig()); + } + private replaceNotification(old: NzNotificationDataFilled, _new: NzNotificationDataFilled): void { old.title = _new.title; old.content = _new.content; diff --git a/components/notification/nz-notification.component.html b/components/notification/nz-notification.component.html index 53696a3e0e9..8cad4d55233 100644 --- a/components/notification/nz-notification.component.html +++ b/components/notification/nz-notification.component.html @@ -28,4 +28,4 @@     - \ No newline at end of file + diff --git a/components/notification/nz-notification.service.ts b/components/notification/nz-notification.service.ts index 87ef8c12aaf..03abccadb48 100644 --- a/components/notification/nz-notification.service.ts +++ b/components/notification/nz-notification.service.ts @@ -12,7 +12,7 @@ import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector, Templat import { NzSingletonService } from 'ng-zorro-antd/core'; import { NzMessageBaseService } from 'ng-zorro-antd/message'; -import { NzNotificationConfig } from './nz-notification-config'; +import { NzNotificationConfigLegacy } from './nz-notification-config'; import { NzNotificationContainerComponent } from './nz-notification-container.component'; import { NzNotificationData, NzNotificationDataFilled, NzNotificationDataOptions } from './nz-notification.definitions'; import { NzNotificationServiceModule } from './nz-notification.service.module'; @@ -23,7 +23,7 @@ import { NzNotificationServiceModule } from './nz-notification.service.module'; export class NzNotificationService extends NzMessageBaseService< NzNotificationContainerComponent, NzNotificationData, - NzNotificationConfig + NzNotificationConfigLegacy > { constructor( nzSingletonService: NzSingletonService, diff --git a/components/progress/demo/round.ts b/components/progress/demo/round.ts index 03660150943..6b3ca0eeb03 100644 --- a/components/progress/demo/round.ts +++ b/components/progress/demo/round.ts @@ -3,8 +3,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-progress-round', template: ` - - + + ` }) diff --git a/components/progress/doc/index.en-US.md b/components/progress/doc/index.en-US.md index c29539f90b5..89a61791050 100644 --- a/components/progress/doc/index.en-US.md +++ b/components/progress/doc/index.en-US.md @@ -30,10 +30,10 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; | `[nzType]` | to set the type | `'line' \| 'circle' \| 'dashboard'` | `'line'` | | `[nzFormat]` | template function of the content | `(percent: number) => string` | `percent => percent + '%'` | | `[nzPercent]` | to set the completion percentage | `number` | `0` | -| `[nzShowInfo]` | whether to display the progress value and the status icon | `boolean` | `true` | +| `[nzShowInfo]` | whether to display the progress value and the status icon | `boolean` | `true` | ✅ | | `[nzStatus]` | to set the status of the Progress | `'success' \| 'exception' \| 'active' \| 'normal'` | - | -| `[nzStrokeLinecap]` | to set the style of the progress linecap | `'round' \| 'square'` | `'round'` | -| `[nzStrokeColor]` | color of progress bar, render linear-gradient when passing an object | `string \| { from: string; to: string: direction: string; [percent: string]: string }` | - | +| `[nzStrokeLinecap]` | to set the style of the progress linecap | `'round' \| 'square'` | `'round'` | ✅ | +| `[nzStrokeColor]` | color of progress bar, render linear-gradient when passing an object | `string \| { from: string; to: string: direction: string; [percent: string]: string }` | - | ✅ | | `[nzSuccessPercent]` | segmented success percent | `number` | 0 | ### `nzType="line"` @@ -47,13 +47,13 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | `[nzWidth]` | to set the canvas width of the circular progress bar, unit: `px` | `number` | `132` | -| `[nzStrokeWidth]` | to set the width of the circular progress bar, unit: percentage of the canvas width | `number` | `6` | +| `[nzStrokeWidth]` | to set the width of the circular progress bar, unit: percentage of the canvas width | `number` | `6` | ✅ | ### `nzType="dashboard"` | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | `[nzWidth]` | to set the canvas width of the dashboard progress bar, unit: `px` | `number` | `132` | -| `[nzStrokeWidth]` | to set the width of the dashboard progress bar, unit: percentage of the canvas width | `number` | `6` | -| `[nzGapDegree]` | the gap degree of half circle, 0 ~ 360 | `number` | `0` | -| `[nzGapPosition]` | the gap position | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | +| `[nzStrokeWidth]` | to set the width of the dashboard progress bar, unit: percentage of the canvas width | `number` | `6` | ✅ | +| `[nzGapDegree]` | the gap degree of half circle, 0 ~ 360 | `number` | `0` | ✅ | +| `[nzGapPosition]` | the gap position | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | ✅ | diff --git a/components/progress/doc/index.zh-CN.md b/components/progress/doc/index.zh-CN.md index 5c290cbd8f3..ba2068ea54b 100644 --- a/components/progress/doc/index.zh-CN.md +++ b/components/progress/doc/index.zh-CN.md @@ -31,10 +31,10 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; | `[nzType]` | 类型 | `'line' \| 'circle' \| 'dashboard'` | `'line'` | | `[nzFormat]` | 内容的模板函数 | `(percent: number) => string` | `percent => percent + '%'` | | `[nzPercent]` | 百分比 | `number` | `0` | -| `[nzShowInfo]` | 是否显示进度数值或状态图标 | `boolean` | `true` | +| `[nzShowInfo]` | 是否显示进度数值或状态图标 | `boolean` | `true` | ✅ | | `[nzStatus]` | 状态 | `'success' \| 'exception' \| 'active' \| 'normal'` | - | -| `[nzStrokeLinecap]` | 进度条端点形状 | `'round' \| 'square'` | `'round'` | -| `[nzStrokeColor]` | 进度条颜色，传入对象时为渐变 | `string \| { from: string; to: string: direction: string; [percent: string]: string }` | - | +| `[nzStrokeLinecap]` | 进度条端点形状 | `'round' \| 'square'` | `'round'` | ✅ | +| `[nzStrokeColor]` | 进度条颜色，传入对象时为渐变 | `string \| { from: string; to: string: direction: string; [percent: string]: string }` | - | ✅ | | `[nzSuccessPercent]` | 已完成的分段百分比 | `number` | 0 | ### `nzType="line"` @@ -48,13 +48,13 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `[nzWidth]` | 圆形进度条画布宽度，单位 px | `number` | `132` | -| `[nzStrokeWidth]` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | `number` | `6` | +| `[nzStrokeWidth]` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | `number` | `6` | ✅ | ### `nzType="dashboard"` | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `[nzWidth]` | 仪表盘进度条画布宽度，单位 px | `number` | `132` | -| `[nzStrokeWidth]` | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | `number` | `6` | -| `[nzGapDegree]` | 仪表盘进度条缺口角度，可取值 0 ~ 360 | `number` | `0` | -| `[nzGapPosition]` | 仪表盘进度条缺口位置 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | +| `[nzStrokeWidth]` | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | `number` | `6` | ✅ | +| `[nzGapDegree]` | 仪表盘进度条缺口角度，可取值 0 ~ 360 | `number` | `0` | ✅ | +| `[nzGapPosition]` | 仪表盘进度条缺口位置 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | ✅ | diff --git a/components/progress/nz-progress.component.ts b/components/progress/nz-progress.component.ts index bcb866d8c37..b303a2a47ee 100644 --- a/components/progress/nz-progress.component.ts +++ b/components/progress/nz-progress.component.ts @@ -6,10 +6,28 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; - -import { isNotNil, InputNumber, NgStyleInterface } from 'ng-zorro-antd/core'; +import { + ChangeDetectionStrategy, + Component, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, + ViewEncapsulation +} from '@angular/core'; +import { + isNotNil, + trimComponentName, + InputNumber, + NgStyleInterface, + NzConfigService, + WithConfig +} from 'ng-zorro-antd/core'; + +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { handleLinearGradient } from './nz-progress-utils'; import { NzProgressCirclePath, @@ -30,6 +48,11 @@ const statusColorMap = new Map([['normal', '#108ee9'], ['exception', '#ff5500'], const defaultFormatter: NzProgressFormatter = (p: number): string => `${p}%`; +export type NzProgressGapPositionType = 'top' | 'bottom' | 'left' | 'right'; +export type NzProgressStatusType = 'success' | 'exception' | 'active' | 'normal'; +export type NzProgressTypeType = 'line' | 'circle' | 'dashboard'; +export type NzProgressStrokeLinecapType = 'round' | 'square'; + @Component({ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, @@ -38,20 +61,20 @@ const defaultFormatter: NzProgressFormatter = (p: number): string => `${p}%`; preserveWhitespaces: false, templateUrl: './nz-progress.component.html' }) -export class NzProgressComponent implements OnChanges { - @Input() nzShowInfo = true; +export class NzProgressComponent implements OnChanges, OnInit, OnDestroy { + @Input() @WithConfig(true) nzShowInfo: boolean; @Input() nzWidth = 132; - @Input() nzSize: string; + @Input() @WithConfig() nzStrokeColor: NzProgressStrokeColorType; + @Input() @WithConfig('default') nzSize: 'default' | 'small'; @Input() nzFormat?: NzProgressFormatter; @Input() @InputNumber() nzSuccessPercent?: number; @Input() @InputNumber() nzPercent: number = 0; - @Input() @InputNumber() nzStrokeWidth: number; - @Input() @InputNumber() nzGapDegree: number; - @Input() nzStrokeColor: NzProgressStrokeColorType; + @Input() @WithConfig() @InputNumber() nzStrokeWidth: number; + @Input() @WithConfig() @InputNumber() nzGapDegree: number; @Input() nzStatus: NzProgressStatusType; @Input() nzType: NzProgressTypeType = 'line'; - @Input() nzGapPosition?: NzProgressGapPositionType; - @Input() nzStrokeLinecap: NzProgressStrokeLinecapType = 'round'; + @Input() @WithConfig('top') nzGapPosition: NzProgressGapPositionType; + @Input() @WithConfig('round') nzStrokeLinecap: NzProgressStrokeLinecapType; /** Gradient style when `nzType` is `line`. */ lineGradient: string | null = null; @@ -94,6 +117,9 @@ export class NzProgressComponent implements OnChanges { private cachedStatus: NzProgressStatusType = 'normal'; private inferredStatus: NzProgressStatusType = 'normal'; + private destroy$ = new Subject(); + + constructor(public nzConfigService: NzConfigService) {} ngOnChanges(changes: SimpleChanges): void { const { @@ -130,13 +156,27 @@ export class NzProgressComponent implements OnChanges { this.setStrokeColor(); } - if (this.isCircleStyle) { - if (nzGapPosition || nzStrokeLinecap || nzGapDegree || nzType || nzPercent || nzStrokeColor) { - this.getCirclePaths(); - } + if (nzGapPosition || nzStrokeLinecap || nzGapDegree || nzType || nzPercent || nzStrokeColor) { + this.getCirclePaths(); } } + ngOnInit(): void { + this.nzConfigService + .getConfigChangeEventForComponent(trimComponentName(this.constructor.name)) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.updateIcon(); + this.setStrokeColor(); + this.getCirclePaths(); + }); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + private updateIcon(): void { const ret = statusIconNameMap.get(this.status); this.icon = ret ? ret + (this.isCircleStyle ? '-o' : '-circle-fill') : ''; @@ -146,6 +186,10 @@ export class NzProgressComponent implements OnChanges { * Calculate paths when the type is circle or dashboard. */ private getCirclePaths(): void { + if (!this.isCircleStyle) { + return; + } + const values = isNotNil(this.nzSuccessPercent) ? [this.nzSuccessPercent!, this.nzPercent] : [this.nzPercent]; // Calculate shared styles. diff --git a/components/rate/doc/index.en-US.md b/components/rate/doc/index.en-US.md index 3ed08d20400..de6d71e9684 100644 --- a/components/rate/doc/index.en-US.md +++ b/components/rate/doc/index.en-US.md @@ -23,10 +23,10 @@ import { NzRateModule } from 'ng-zorro-antd/rate'; ### nz-rate -| Property | Description | type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzAllowClear]` | whether to allow clear when click again | `boolean` | `true` | -| `[nzAllowHalf]` | whether to allow semi selection | `boolean` | `false` | +| Property | Description | type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | +| `[nzAllowClear]` | whether to allow clear when click again | `boolean` | `true` | ✅ | +| `[nzAllowHalf]` | whether to allow semi selection | `boolean` | `false` | ✅ | | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | | `[nzCharacter]` | custom character of rate | `TemplateRef` | `` | | `[nzCount]` | star count | `number` | `5` | diff --git a/components/rate/doc/index.zh-CN.md b/components/rate/doc/index.zh-CN.md index c451822d02e..8a642d7d9fc 100644 --- a/components/rate/doc/index.zh-CN.md +++ b/components/rate/doc/index.zh-CN.md @@ -24,10 +24,10 @@ import { NzRateModule } from 'ng-zorro-antd/rate'; ### nz-rate -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[nzAllowClear]` | 是否允许再次点击后清除 | `boolean` | `true` | -| `[nzAllowHalf]` | 是否允许半选 | `boolean` | `false` | +| 属性 | 说明 | 类型 | 默认值 | 支持全局配置 | +| --- | --- | --- | --- | --- | +| `[nzAllowClear]` | 是否允许再次点击后清除 | `boolean` | `true` | ✅ | +| `[nzAllowHalf]` | 是否允许半选 | `boolean` | `false` | ✅ | | `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` | | `[nzCharacter]` | 自定义字符 | `TemplateRef` | `` | | `[nzCount]` | star 总数 | `number` | `5` | diff --git a/components/rate/nz-rate.component.ts b/components/rate/nz-rate.component.ts index 3161204fad4..73a07023c18 100644 --- a/components/rate/nz-rate.component.ts +++ b/components/rate/nz-rate.component.ts @@ -17,6 +17,7 @@ import { EventEmitter, Input, OnChanges, + OnDestroy, OnInit, Output, Renderer2, @@ -27,7 +28,9 @@ import { } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { InputBoolean, NgClassType } from 'ng-zorro-antd/core'; +import { trimComponentName, InputBoolean, NgClassType, NzConfigService, WithConfig } from 'ng-zorro-antd/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, @@ -44,11 +47,11 @@ import { InputBoolean, NgClassType } from 'ng-zorro-antd/core'; } ] }) -export class NzRateComponent implements OnInit, ControlValueAccessor, AfterViewInit, OnChanges { +export class NzRateComponent implements OnInit, OnDestroy, ControlValueAccessor, AfterViewInit, OnChanges { @ViewChild('ulElement', { static: false }) private ulElement: ElementRef; - @Input() @InputBoolean() nzAllowClear: boolean = true; - @Input() @InputBoolean() nzAllowHalf: boolean = false; + @Input() @WithConfig(true) @InputBoolean() nzAllowClear: boolean; + @Input() @WithConfig(false) @InputBoolean() nzAllowHalf: boolean; @Input() @InputBoolean() nzDisabled: boolean = false; @Input() @InputBoolean() nzAutoFocus: boolean = false; @Input() nzCharacter: TemplateRef; @@ -67,6 +70,7 @@ export class NzRateComponent implements OnInit, ControlValueAccessor, AfterViewI isInit = false; starArray: number[] = []; + private destroy$ = new Subject(); private _count = 5; private _value = 0; @@ -97,7 +101,7 @@ export class NzRateComponent implements OnInit, ControlValueAccessor, AfterViewI this.hoverValue = Math.ceil(input); } - constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) {} + constructor(public nzConfigService: NzConfigService, private renderer: Renderer2, private cdr: ChangeDetectorRef) {} ngOnChanges(changes: SimpleChanges): void { if (changes.nzAutoFocus && !changes.nzAutoFocus.isFirstChange()) { @@ -111,6 +115,16 @@ export class NzRateComponent implements OnInit, ControlValueAccessor, AfterViewI ngOnInit(): void { this.updateStarArray(); + + this.nzConfigService + .getConfigChangeEventForComponent(trimComponentName(this.constructor.name)) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => this.cdr.markForCheck()); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); } ngAfterViewInit(): void { diff --git a/components/switch/doc/index.en-US.md b/components/switch/doc/index.en-US.md index 8be4c1e721f..5aafe6a8e96 100755 --- a/components/switch/doc/index.en-US.md +++ b/components/switch/doc/index.en-US.md @@ -23,13 +23,13 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch'; ### nz-switch -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[ngModel]` | determine whether the `nz-switch` is checked, double binding | `boolean` | `false` | | `[nzCheckedChildren]` | content to be shown when the state is checked | `string \| TemplateRef` | - | | `[nzUnCheckedChildren]` | content to be shown when the state is unchecked | `string \| TemplateRef` | - | | `[nzDisabled]` | Disable switch | `boolean` | `false` | -| `[nzSize]` | the size of the `nz-switch`, options: `default` `small` | `'small' \| 'default'` | `'default'` | +| `[nzSize]` | the size of the `nz-switch`, options: `default` `small` | `'small' \| 'default'` | `'default'` | ✅ | | `[nzLoading]` | loading state of switch | `boolean` | `false` | | `[nzControl]` | determine whether fully control state by user | `boolean` | `false` | | `(ngModelChange)` | a callback function, can be executed when the checked state is changing | `EventEmitter` | - | diff --git a/components/switch/doc/index.zh-CN.md b/components/switch/doc/index.zh-CN.md index e4d7f380ab2..19b8e4aaf48 100755 --- a/components/switch/doc/index.zh-CN.md +++ b/components/switch/doc/index.zh-CN.md @@ -24,13 +24,13 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch'; ### nz-switch -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[ngModel]` | 指定当前是否选中，可双向绑定 | `boolean` | `false` | | `[nzCheckedChildren]` | 选中时的内容 | `string \| TemplateRef` | - | | `[nzUnCheckedChildren]` | 非选中时的内容 | `string \| TemplateRef` | - | | `[nzDisabled]` | disable 状态 | `boolean` | `false` | -| `[nzSize]` | 开关大小，可选值：`default` `small` | `'small' \| 'default'` | `'default'` | +| `[nzSize]` | 开关大小，可选值：`default` `small` | `'small' \| 'default'` | `'default'` | ✅ | | `[nzLoading]` | 加载中的开关 | `boolean` | `false` | | `[nzControl]` | 是否完全由用户控制状态 | `boolean` | `false` | | `(ngModelChange)` | 当前是否选中的回调 | `EventEmitter` | `false` | diff --git a/components/switch/nz-switch.component.html b/components/switch/nz-switch.component.html index 54285f33cfe..928fc433b11 100644 --- a/components/switch/nz-switch.component.html +++ b/components/switch/nz-switch.component.html @@ -19,4 +19,4 @@ - \ No newline at end of file + diff --git a/components/switch/nz-switch.component.ts b/components/switch/nz-switch.component.ts index 673c1547ff5..3742b130589 100644 --- a/components/switch/nz-switch.component.ts +++ b/components/switch/nz-switch.component.ts @@ -23,7 +23,7 @@ import { } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { InputBoolean, NzSizeDSType } from 'ng-zorro-antd/core'; +import { InputBoolean, NzConfigService, NzSizeDSType, WithConfig } from 'ng-zorro-antd/core'; @Component({ selector: 'nz-switch', @@ -60,7 +60,7 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, O @Input() @InputBoolean() nzControl = false; @Input() nzCheckedChildren: string | TemplateRef; @Input() nzUnCheckedChildren: string | TemplateRef; - @Input() nzSize: NzSizeDSType; + @Input() @WithConfig('default') nzSize: NzSizeDSType; hostClick(e: MouseEvent): void { e.preventDefault(); @@ -99,7 +99,11 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, O this.switchElement.nativeElement.blur(); } - constructor(private cdr: ChangeDetectorRef, private focusMonitor: FocusMonitor) {} + constructor( + public nzConfigService: NzConfigService, + private cdr: ChangeDetectorRef, + private focusMonitor: FocusMonitor + ) {} ngAfterViewInit(): void { this.focusMonitor.monitor(this.switchElement.nativeElement, true).subscribe(focusOrigin => { diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md index 2bdec670f9f..c16e76c715f 100644 --- a/components/table/doc/index.en-US.md +++ b/components/table/doc/index.en-US.md @@ -65,8 +65,8 @@ The data passed to `[nzData]` will be export with [Template Context](https://ang ### nz-table -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzData]` | Data record array to be displayed | `any[]` | - | | `[nzFrontPagination]` | Whether paginate data in front side，should set to `false` if you want to paginate data in server side or display all data in table | `boolean` | `true` | | `[nzTotal]` | Total data count, should set when `nzServerRender` is true | `number` | - | @@ -74,9 +74,9 @@ The data passed to `[nzData]` will be export with [Template Context](https://ang | `[nzPageSize]` | pageSize, double binding | `number` | - | | `[nzShowPagination]` | Whether show pagination component in bottom of the table | `boolean` | `true` | | `[nzPaginationPosition]` | Specify the position of Pagination | `'top' \| 'bottom' \| 'both'` | `bottom` | -| `[nzBordered]` | Whether to show all table borders | `boolean` | `false` | +| `[nzBordered]` | Whether to show all table borders | `boolean` | `false` | ✅ | | `[nzWidthConfig]` | Set col width can not used with `nzWidth` of `th` | `string[]` | - | -| `[nzSize]` | Size of table | `'middle' \| 'small' \| 'default'` | `'default'` | +| `[nzSize]` | Size of table | `'middle' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzLoading]` | Loading status of table | `boolean` | `false` | | `[nzLoadingIndicator]` | the spinning indicator | `TemplateRef` | - | | `[nzLoadingDelay]` | Specifies a delay in milliseconds for loading state (prevent flush) | `number` | `0` | @@ -85,12 +85,12 @@ The data passed to `[nzData]` will be export with [Template Context](https://ang | `[nzFooter]` | Table footer renderer | `string \| TemplateRef` | - | | `[nzNoResult]` | Custom no result content | `string \| TemplateRef` | - | | `[nzPageSizeOptions]` | Specify the sizeChanger options | `number[]` | `[10, 20, 30, 40]` | -| `[nzShowQuickJumper]` | Determine whether you can jump to pages directly | `boolean` | `false` | -| `[nzShowSizeChanger]` | Determine whether `nzPageSize` can be changed | `boolean` | `false` | +| `[nzShowQuickJumper]` | Determine whether you can jump to pages directly | `boolean` | `false` | ✅ | +| `[nzShowSizeChanger]` | Determine whether `nzPageSize` can be changed | `boolean` | `false` | ✅ | | `[nzShowTotal]` | To display Pagination total number and range, same as Pagination | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | | `[nzItemRender]` | to customize Pagination item, same as Pagination | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next', page: number }>` | - | | `[nzHideOnSinglePage]` | Whether to hide pager on single page | `boolean` | `false` | -| `[nzSimple]` | whether to use simple mode | `boolean` | - | +| `[nzSimple]` | whether to use simple mode | `boolean` | - | ✅ | | `[nzTemplateMode]` | template mode，no need to pass data to `nzData` | `boolean` | `false` | | `[nzVirtualScroll]` | Enable virtual scroll mode，work with `[nzScroll]` | `boolean` | `false` | | `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `0` | @@ -214,4 +214,4 @@ According to [Angular documentation](https://angular.io/guide/lifecycle-hooks#on }]; // remove data this.dataSet = this.dataSet.filter(d => d.key !== i); -``` \ No newline at end of file +``` diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md index eb4b0ab3b55..62563aa609f 100644 --- a/components/table/doc/index.zh-CN.md +++ b/components/table/doc/index.zh-CN.md @@ -66,8 +66,8 @@ Table 组件同时具备了易用性和高度可定制性 ### nz-table -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzData]` | 数据数组 | `any[]` | - | | `[nzFrontPagination]` | 是否在前端对数据进行分页，如果在服务器分页数据或者需要在前端显示全部数据时传入 false | `boolean` | `true` | | `[nzTotal]` | 当前总数据，在服务器渲染时需要传入 | `number` | - | @@ -75,9 +75,9 @@ Table 组件同时具备了易用性和高度可定制性 | `[nzPageSize]` | 每页展示多少数据，可双向绑定 | `number` | - | | `[nzShowPagination]` | 是否显示分页器 | `boolean` | `true` | | `[nzPaginationPosition]` | 指定分页显示的位置 | `'top' \| 'bottom' \| 'both'` | `bottom` | -| `[nzBordered]` | 是否展示外边框和列边框 | `boolean` | `false` | +| `[nzBordered]` | 是否展示外边框和列边框 | `boolean` | `false` | ✅ | | `[nzWidthConfig]` | 表头分组时指定每列宽度，与 `th` 的 `nzWidth` 不可混用 | `string[]` | - | -| `[nzSize]` | 正常或迷你类型 | `'middle' \| 'small' \| 'default'` | `'default'` | +| `[nzSize]` | 正常或迷你类型 | `'middle' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzLoading]` | 页面是否加载中 | `boolean` | `false` | | `[nzLoadingIndicator]` | 加载指示符 | `TemplateRef` | - | | `[nzLoadingDelay]` | 延迟显示加载效果的时间（防止闪烁） | `number` | `0` | @@ -86,12 +86,12 @@ Table 组件同时具备了易用性和高度可定制性 | `[nzFooter]` | 表格尾部 | `string \| TemplateRef` | - | | `[nzNoResult]` | 无数据时显示内容 | `string \| TemplateRef` | - | | `[nzPageSizeOptions]` | 页数选择器可选值 | `number[]` | `[ 10, 20, 30, 40, 50 ]` | -| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` | -| `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` | +| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` | ✅ | +| `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` | ✅ | | `[nzShowTotal]` | 用于显示数据总量和当前数据范围，用法参照 Pagination 组件 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | | `[nzItemRender]` | 用于自定义页码的结构，用法参照 Pagination 组件 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next', page: number }>` | - | -| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | -| `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | +| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | ✅ | +| `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | ✅ | | `[nzVirtualScroll]` | 是否启用虚拟滚动模式，与 `[nzScroll]` 配合使用 | `boolean` | `false` | | `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `0` | | `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `200` | diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts index 36e6834365a..8f5ddad30a1 100644 --- a/components/table/nz-table.component.ts +++ b/components/table/nz-table.component.ts @@ -35,7 +35,14 @@ import { import { fromEvent, merge, EMPTY, Subject } from 'rxjs'; import { flatMap, startWith, takeUntil } from 'rxjs/operators'; -import { measureScrollbar, InputBoolean, InputNumber, NzSizeMDSType } from 'ng-zorro-antd/core'; +import { + measureScrollbar, + InputBoolean, + InputNumber, + NzConfigService, + NzSizeMDSType, + WithConfig +} from 'ng-zorro-antd/core'; import { NzI18nService } from 'ng-zorro-antd/i18n'; import { PaginationItemRenderContext } from 'ng-zorro-antd/pagination'; @@ -82,7 +89,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestr @ViewChild(CdkVirtualScrollViewport, { static: false, read: CdkVirtualScrollViewport }) cdkVirtualScrollViewport: CdkVirtualScrollViewport; @ContentChild(NzVirtualScrollDirective, { static: false }) nzVirtualScrollDirective: NzVirtualScrollDirective; - @Input() nzSize: NzSizeMDSType = 'default'; + @Input() @WithConfig('default') nzSize: NzSizeMDSType; @Input() nzShowTotal: TemplateRef<{ $implicit: number; range: [number, number] }>; @Input() nzPageSizeOptions = [10, 20, 30, 40, 50]; @Input() @InputBoolean() nzVirtualScroll = false; @@ -110,13 +117,13 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestr } @Input() @InputBoolean() nzFrontPagination = true; @Input() @InputBoolean() nzTemplateMode = false; - @Input() @InputBoolean() nzBordered = false; + @Input() @WithConfig(false) @InputBoolean() nzBordered: boolean; @Input() @InputBoolean() nzShowPagination = true; @Input() @InputBoolean() nzLoading = false; - @Input() @InputBoolean() nzShowSizeChanger = false; - @Input() @InputBoolean() nzHideOnSinglePage = false; - @Input() @InputBoolean() nzShowQuickJumper = false; - @Input() @InputBoolean() nzSimple = false; + @Input() @WithConfig(false) @InputBoolean() nzShowSizeChanger: boolean; + @Input() @WithConfig(false) @InputBoolean() nzHideOnSinglePage: boolean; + @Input() @WithConfig(false) @InputBoolean() nzShowQuickJumper: boolean; + @Input() @WithConfig(false) @InputBoolean() nzSimple: boolean; @Output() readonly nzPageSizeChange: EventEmitter = new EventEmitter(); @Output() readonly nzPageIndexChange: EventEmitter = new EventEmitter(); /* tslint:disable-next-line:no-any */ @@ -234,6 +241,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestr } constructor( + public nzConfigService: NzConfigService, private renderer: Renderer2, private ngZone: NgZone, private cdr: ChangeDetectorRef, diff --git a/components/tabs/doc/index.en-US.md b/components/tabs/doc/index.en-US.md index 52200810746..e863302fc87 100644 --- a/components/tabs/doc/index.en-US.md +++ b/components/tabs/doc/index.en-US.md @@ -27,19 +27,19 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs'; ### nz-tabset -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzSelectedIndex]` | Current tab's index | `number` | - | -| `[nzAnimated]` | Whether to change tabs with animation. Only works while `nzTabPosition="top" \| "bottom"` | `boolean \| {inkBar:boolean, tabPane:boolean}` | `true`, `false` when `type="card"` | -| `[nzSize]` | preset tab bar size | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzAnimated]` | Whether to change tabs with animation. Only works while `nzTabPosition="top" \| "bottom"` | `boolean \| {inkBar:boolean, tabPane:boolean}` | `true`, `false` when `type="card"` | ✅ | +| `[nzSize]` | preset tab bar size | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzTabBarExtraContent]` | Extra content in tab bar | `TemplateRef` | - | | `[nzTabBarStyle]` | Tab bar style object | `object` | - | -| `[nzTabPosition]` | Position of tabs | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | -| `[nzType]` | Basic style of tabs | `'line' \| 'card'` | `'line'` | -| `[nzTabBarGutter]` | The gap between tabs | `number` | - | +| `[nzTabPosition]` | Position of tabs | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | | +| `[nzType]` | Basic style of tabs | `'line' \| 'card'` | `'line'` | ✅ | +| `[nzTabBarGutter]` | The gap between tabs | `number` | - | ✅ | | `[nzHideAll]` | Whether hide all tabs | `boolean` | `false` | -| `[nzShowPagination]` | Whether show pre or next button when exceed display area | `boolean` | `true` | -| `[nzLinkRouter]` | Link with Angular router. It supports child mode and query param mode | `boolean` | `false` | +| `[nzShowPagination]` | Whether show pre or next button when exceed display area | `boolean` | `true` | ✅ | +| `[nzLinkRouter]` | Link with Angular router. It supports child mode and query param mode | `boolean` | `false` || | `[nzLinkExact]` | Use exact routing matching | `boolean` | `true` | | `(nzSelectedIndexChange)` | Current tab's index change callback | `EventEmitter` | - | | `(nzSelectChange)` | Current tab's change callback | `EventEmitter<{nzSelectedIndex: number,tab: NzTabComponent}>` | - | diff --git a/components/tabs/doc/index.zh-CN.md b/components/tabs/doc/index.zh-CN.md index d5e4283f09e..b424329b4c7 100644 --- a/components/tabs/doc/index.zh-CN.md +++ b/components/tabs/doc/index.zh-CN.md @@ -30,19 +30,19 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs'; ### nz-tabset -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzSelectedIndex]` | 当前激活 tab 面板的 序列号，可双向绑定 | `number` | - | -| `[nzAnimated]` | 是否使用动画切换 Tabs，在 nzTabPosition=top \| bottom 时有效 | `boolean \| {inkBar:boolean, tabPane:boolean}` | `true`, 当 `type="card"` 时为 `false` | -| `[nzSize]` | 大小，提供 `large` `default` 和 `small` 三种大小 | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzAnimated]` | 是否使用动画切换 Tabs，在 nzTabPosition=top \| bottom 时有效 | `boolean \| {inkBar:boolean, tabPane:boolean}` | `true`, 当 `type="card"` 时为 `false` | ✅ | +| `[nzSize]` | 大小，提供 `large` `default` 和 `small` 三种大小 | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzTabBarExtraContent]` | tab bar 上额外的元素 | `TemplateRef` | - | | `[nzTabBarStyle]` | tab bar 的样式对象 | `object` | - | -| `[nzTabPosition]` | 页签位置，可选值有 `top` `right` `bottom` `left` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | -| `[nzType]` | 页签的基本样式，可选 `line`、`card` 类型 | `'line' \| 'card'` | `'line'` | -| `[nzTabBarGutter]` | tabs 之间的间隙 | `number` | - | +| `[nzTabPosition]` | 页签位置，可选值有 `top` `right` `bottom` `left` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | | +| `[nzType]` | 页签的基本样式，可选 `line`、`card` 类型 | `'line' \| 'card'` | `'line'` | ✅ | +| `[nzTabBarGutter]` | tabs 之间的间隙 | `number` | - | ✅ | | `[nzHideAll]` | 是否隐藏所有tab内容 | `boolean` | `false` | -| `[nzShowPagination]` | 是否超出范围时显示pre和next按钮 | `boolean` | `true` | -| `[nzLinkRouter]` | 与 Angular 路由联动 | `boolean` | `false` | +| `[nzShowPagination]` | 是否超出范围时显示pre和next按钮 | `boolean` | `true` | ✅ | +| `[nzLinkRouter]` | 与 Angular 路由联动 | `boolean` | `false` || | `[nzLinkExact]` | 以严格匹配模式确定联动的路由 | `boolean` | `true` | | `(nzSelectedIndexChange)` | 当前激活 tab 面板的 序列号变更回调函数 | `EventEmitter` | - | | `(nzSelectChange)` | 当前激活 tab 面板变更回调函数 | `EventEmitter<{nzSelectedIndex: number,tab: NzTabComponent}>` | - | diff --git a/components/tabs/nz-tabset.component.ts b/components/tabs/nz-tabset.component.ts index e7d4996d4c6..5c1199582ea 100644 --- a/components/tabs/nz-tabset.component.ts +++ b/components/tabs/nz-tabset.component.ts @@ -34,7 +34,16 @@ import { import { NavigationEnd, Router, RouterLink, RouterLinkWithHref } from '@angular/router'; import { merge, Subject, Subscription } from 'rxjs'; -import { toNumber, InputBoolean, NzSizeLDSType, NzUpdateHostClassService, PREFIX } from 'ng-zorro-antd/core'; +import { + toNumber, + InputBoolean, + NzConfigService, + NzFourDirectionType, + NzSizeLDSType, + NzUpdateHostClassService, + PREFIX, + WithConfig +} from 'ng-zorro-antd/core'; import { filter, startWith, takeUntil } from 'rxjs/operators'; import { NzTabComponent } from './nz-tab.component'; @@ -50,7 +59,7 @@ export class NzTabChangeEvent { tab: NzTabComponent; } -export type NzTabPosition = 'top' | 'bottom' | 'left' | 'right'; +export type NzTabPosition = NzFourDirectionType; export type NzTabPositionMode = 'horizontal' | 'vertical'; export type NzTabType = 'line' | 'card'; @@ -88,14 +97,14 @@ export class NzTabSetComponent @ViewChild('tabContent', { static: false }) tabContent: ElementRef; @Input() nzTabBarExtraContent: TemplateRef; - @Input() nzShowPagination = true; - @Input() nzAnimated: NzAnimatedInterface | boolean = true; + @Input() @WithConfig(true) nzShowPagination: boolean; + @Input() @WithConfig(true) nzAnimated: NzAnimatedInterface | boolean; @Input() nzHideAll = false; @Input() nzTabPosition: NzTabPosition = 'top'; - @Input() nzSize: NzSizeLDSType = 'default'; - @Input() nzTabBarGutter: number; + @Input() @WithConfig('default') nzSize: NzSizeLDSType; + @Input() @WithConfig() nzTabBarGutter: number; @Input() nzTabBarStyle: { [key: string]: string }; - @Input() nzType: NzTabType = 'line'; + @Input() @WithConfig('line') nzType: NzTabType; @Input() @InputBoolean() nzLinkRouter = false; @Input() @InputBoolean() nzLinkExact = true; @@ -194,6 +203,7 @@ export class NzTabSetComponent } constructor( + public nzConfigService: NzConfigService, private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService, private elementRef: ElementRef, diff --git a/components/time-picker/doc/index.en-US.md b/components/time-picker/doc/index.en-US.md index 8dcc92bf3d9..0ccc2f0674b 100644 --- a/components/time-picker/doc/index.en-US.md +++ b/components/time-picker/doc/index.en-US.md @@ -26,27 +26,27 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; ### nz-time-picker -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[ngModel]` | to set time | `Date` | - | | `[nzAddon]` | called from timepicker panel to render some addon to its bottom | `TemplateRef` | - | -| `[nzAllowEmpty]` | allow clearing text | `boolean` | `true` | +| `[nzAllowEmpty]` | allow clearing text | `boolean` | `true` | ✅ | | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | -| `[nzClearText]` | clear tooltip of icon | `string` | `'clear'` | +| `[nzClearText]` | clear tooltip of icon | `string` | `'clear'` | ✅ | | `[nzDefaultOpenValue]` | default open panel value | `Date` | `new Date()` | | `[nzDisabled]` | determine whether the TimePicker is disabled | `boolean` | `false` | | `[nzDisabledHours]` | to specify the hours that cannot be selected | `() => number[]` | - | | `[nzDisabledMinutes]` | to specify the minutes that cannot be selected | `(hour: number) => number[]` | - | | `[nzDisabledSeconds]` | to specify the seconds that cannot be selected | `(hour: number, minute: number) => number[]` | - | -| `[nzFormat]` | to set the time format | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` | +| `[nzFormat]` | to set the time format | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` | ✅ | | `[nzHideDisabledOptions]` | hide the options that can not be selected | `boolean` | `false` | -| `[nzHourStep]` | interval between hours in picker | `number` | `1` | -| `[nzMinuteStep]` | interval between minutes in picker | `number` | `1` | -| `[nzSecondStep]` | interval between seconds in picker | `number` | `1` | +| `[nzHourStep]` | interval between hours in picker | `number` | `1` | ✅ | +| `[nzMinuteStep]` | interval between minutes in picker | `number` | `1` | ✅ | +| `[nzSecondStep]` | interval between seconds in picker | `number` | `1` | ✅ | | `[nzOpen]` | whether to popup panel, double binding | `boolean` | `false` | | `[nzPlaceHolder]` | display when there's no value | `string` | `"Select a time"` | -| `[nzPopupClassName]` | className of panel | `string` | `''` | -| `[nzUse12Hours]` | display as 12 hours format, with default format `h:mm:ss a` | `boolean` | `false` | +| `[nzPopupClassName]` | className of panel | `string` | `''` | ✅ | +| `[nzUse12Hours]` | display as 12 hours format, with default format `h:mm:ss a` | `boolean` | `false` | ✅ | | `(ngModelChange)` | a callback function, can be executed when the selected time is changing | `EventEmitter` | - | | `(nzOpenChange)` | a callback function which will be called while panel opening/closing | `EventEmitter` | - | diff --git a/components/time-picker/doc/index.zh-CN.md b/components/time-picker/doc/index.zh-CN.md index 1f1e9be65c6..cb752127da0 100644 --- a/components/time-picker/doc/index.zh-CN.md +++ b/components/time-picker/doc/index.zh-CN.md @@ -27,27 +27,27 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; ### nz-time-picker -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[ngModel]` | 当前时间 | `Date` | - | | `[nzAddon]` | 选择框底部显示自定义的内容 | `TemplateRef` | - | -| `[nzAllowEmpty]` | 是否展示清除按钮 | `boolean` | `true` | +| `[nzAllowEmpty]` | 是否展示清除按钮 | `boolean` | `true` | ✅ | | `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` | -| `[nzClearText]` | 清除按钮的提示文案 | `string` | `'clear'` | +| `[nzClearText]` | 清除按钮的提示文案 | `string` | `'clear'` | ✅ | | `[nzDefaultOpenValue]` | 设置面板打开时默认选中的值 | `Date` | `new Date()` | | `[nzDisabled]` | 禁用全部操作 | `boolean` | `false` | | `[nzDisabledHours]` | 禁止选择部分小时选项 | `() => number[]` | - | | `[nzDisabledMinutes]` | 禁止选择部分分钟选项 | `(hour: number) => number[]` | - | | `[nzDisabledSeconds]` | 禁止选择部分秒选项 | `(hour: number, minute: number) => number[]` | - | -| `[nzFormat]` | 展示的时间格式 | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` | +| `[nzFormat]` | 展示的时间格式 | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` | ✅ | | `[nzHideDisabledOptions]` | 隐藏禁止选择的选项 | `boolean` | `false` | -| `[nzHourStep]` | 小时选项间隔 | `number` | `1` | -| `[nzMinuteStep]` | 分钟选项间隔 | `number` | `1` | -| `[nzSecondStep]` | 秒选项间隔 | `number` | `1` | +| `[nzHourStep]` | 小时选项间隔 | `number` | `1` | ✅ | +| `[nzMinuteStep]` | 分钟选项间隔 | `number` | `1` | ✅ | +| `[nzSecondStep]` | 秒选项间隔 | `number` | `1` | ✅ | | `[nzOpen]` | 面板是否打开，可双向绑定 | `boolean` | `false` | | `[nzPlaceHolder]` | 没有值的时候显示的内容 | `string` | `"请选择时间"` | -| `[nzPopupClassName]` | 弹出层类名 | `string` | `''` | -| `[nzUse12Hours]` | 使用12小时制，为true时format默认为`h:mm:ss a` | `boolean` | `false` | +| `[nzPopupClassName]` | 弹出层类名 | `string` | `''` | ✅ | +| `[nzUse12Hours]` | 使用12小时制，为true时format默认为`h:mm:ss a` | `boolean` | `false` | ✅ | | `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter` | - | | `(nzOpenChange)` | 面板打开/关闭时的回调 | `EventEmitter` | - | diff --git a/components/time-picker/nz-time-picker.component.ts b/components/time-picker/nz-time-picker.component.ts index 7ccf3ff26f6..5d5c1d5e9ab 100644 --- a/components/time-picker/nz-time-picker.component.ts +++ b/components/time-picker/nz-time-picker.component.ts @@ -26,7 +26,14 @@ import { } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { isNotNil, slideMotion, InputBoolean, NzUpdateHostClassService as UpdateCls } from 'ng-zorro-antd/core'; +import { + isNotNil, + slideMotion, + InputBoolean, + NzConfigService, + NzUpdateHostClassService as UpdateCls, + WithConfig +} from 'ng-zorro-antd/core'; @Component({ encapsulation: ViewEncapsulation.None, @@ -55,24 +62,24 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte ]; @ViewChild('inputElement', { static: true }) inputRef: ElementRef; @Input() nzSize: string | null = null; - @Input() nzHourStep = 1; - @Input() nzMinuteStep = 1; - @Input() nzSecondStep = 1; - @Input() nzClearText = 'clear'; - @Input() nzPopupClassName = ''; + @Input() @WithConfig(1) nzHourStep: number; + @Input() @WithConfig(1) nzMinuteStep: number; + @Input() @WithConfig(1) nzSecondStep: number; + @Input() @WithConfig('clear') nzClearText: string; + @Input() @WithConfig() nzPopupClassName: string; @Input() nzPlaceHolder = ''; @Input() nzAddOn: TemplateRef; @Input() nzDefaultOpenValue = new Date(); @Input() nzDisabledHours: () => number[]; @Input() nzDisabledMinutes: (hour: number) => number[]; @Input() nzDisabledSeconds: (hour: number, minute: number) => number[]; - @Input() nzFormat = 'HH:mm:ss'; + @Input() @WithConfig('HH:mm:ss') nzFormat: string; @Input() nzOpen = false; - @Input() nzUse12Hours = false; + @Input() @WithConfig(false) @InputBoolean() nzUse12Hours: boolean; @Output() readonly nzOpenChange = new EventEmitter(); @Input() @InputBoolean() nzHideDisabledOptions = false; - @Input() @InputBoolean() nzAllowEmpty = true; + @Input() @WithConfig(true) @InputBoolean() nzAllowEmpty: boolean; @Input() @InputBoolean() nzDisabled = false; @Input() @InputBoolean() nzAutoFocus = false; @@ -138,6 +145,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte } constructor( + public nzConfigService: NzConfigService, private element: ElementRef, private renderer: Renderer2, private updateCls: UpdateCls, diff --git a/components/timeline/doc/index.en-US.md b/components/timeline/doc/index.en-US.md index e4ccd6737c0..cc148e5ff1b 100644 --- a/components/timeline/doc/index.en-US.md +++ b/components/timeline/doc/index.en-US.md @@ -36,8 +36,8 @@ Timeline | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | -| `[nzPending]` | Set the last ghost node's existence or its content | `string \| boolean \| TemplateRef` | `false` | -| `[nzPendingDot]` | Set the dot of the last ghost node when pending is true | `string \| TemplateRef` | `` | +| `[nzPending]` | Set the last ghost node's existence or its content | `string\|boolean\|TemplateRef` | `false` | +| `[nzPendingDot]` | Set the dot of the last ghost node when pending is true | `string\|TemplateRef` | `` | | `[nzReverse]` | Reverse nodes or not | `boolean` | `false` | | `[nzMode]` | By sending `alternate` the timeline will distribute the nodes to the left and right | `'left' \| 'alternate' \| 'right'` | - | diff --git a/components/transfer/nz-transfer.component.html b/components/transfer/nz-transfer.component.html index 0b91c80a668..249811b531e 100644 --- a/components/transfer/nz-transfer.component.html +++ b/components/transfer/nz-transfer.component.html @@ -43,4 +43,4 @@ [footer]="nzFooter" (handleSelect)="handleRightSelect($event)" (handleSelectAll)="handleRightSelectAll($event)"> - \ No newline at end of file + diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md index 15363aebb38..78d2d242176 100755 --- a/components/tree-select/doc/index.en-US.md +++ b/components/tree-select/doc/index.en-US.md @@ -23,22 +23,22 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; ### nz-tree-select -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzAllowClear]` | Whether allow clear | `boolean` | `false` | | `[nzPlaceHolder]` | Placeholder of the select input | `string` | - | | `[nzDisabled]` | Disabled or not | `boolean` | `false` | | `[nzShowIcon]` | Shows the icon before a TreeNode's title. There is no default style | `boolean` | `false` | -| `[nzShowSearch]` | Whether to display a search input in the dropdown menu(valid only in the single mode) | `boolean` | `false` | +| `[nzShowSearch]` | Whether to display a search input in the dropdown menu(valid only in the single mode) | `boolean` | `false` | ✅ | | `[nzNotFoundContent]` | Specify content to show when no result matches. | `string` | - | -| `[nzDropdownMatchSelectWidth]` | Determine whether the dropdown menu and the select input are the same width | `boolean` | `true` | +| `[nzDropdownMatchSelectWidth]` | Determine whether the dropdown menu and the select input are the same width | `boolean` | `true` | ✅ | | `[nzDropdownStyle]` | To set the style of the dropdown menu | `object` | - | | `[nzMultiple]` | Support multiple or not, will be `true` when enable `nzCheckable`. | `boolean` | `false` | -| `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` | -| `[nzSize]` | To set the size of the select input | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` | ✅ | +| `[nzSize]` | To set the size of the select input | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzCheckable]` | Whether to show checkbox on the treeNodes | `boolean` | `false` | -| `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` | -| `[nzShowLine]` | Shows a connecting line | `boolean` | `false` | +| `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` | | +| `[nzShowLine]` | Shows a connecting line | `boolean` | `false` | | | `[nzAsyncData]` | Load data asynchronously (should be used with NzTreeNode.addChildren(...)) | `boolean` | `false` | | `[nzNodes]` | Data of the treeNodes | `NzTreeNodeOptions[]` | `[]` | | `[nzDefaultExpandAll]` | Whether to expand all treeNodes by default | `boolean` | `false` | diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md index cb89bc2a3d0..397f15c2afe 100755 --- a/components/tree-select/doc/index.zh-CN.md +++ b/components/tree-select/doc/index.zh-CN.md @@ -23,22 +23,22 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; ### nz-tree-select -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzAllowClear]` | 显示清除按钮 | `boolean` | `false` | | `[nzPlaceHolder]` | 选择框默认文字 | `string` | - | | `[nzDisabled]` | 禁用选择器 | `boolean` | `false` | -| `[nzShowIcon]` | 是否展示 TreeNode title 前的图标，没有默认样式 | `boolean` | `false` | +| `[nzShowIcon]` | 是否展示 TreeNode title 前的图标，没有默认样式 | `boolean` | `false` | ✅ | | `[nzShowSearch]` | 显示搜索框 | `boolean` | `false` | | `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string` | - | -| `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | +| `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | ✅ | | `[nzDropdownStyle]` | 下拉菜单的样式 | `{ [key: string]: string; }` | - | | `[nzMultiple]` | 支持多选（当设置 nzCheckable 时自动变为true） | `boolean` | `false` | -| `[nzHideUnMatched]` | 搜索隐藏未匹配的节点 | `boolean` | `false` | -| `[nzSize]` | 选择框大小 | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzHideUnMatched]` | 搜索隐藏未匹配的节点 | `boolean` | `false` | ✅ | +| `[nzSize]` | 选择框大小 | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzCheckable]` | 节点前添加 Checkbox 复选框 | `boolean` | `false` | -| `[nzShowExpand]` | 节点前添加展开图标 | `boolean` | `true` | -| `[nzShowLine]` | 是否展示连接线 | `boolean` | `false` | +| `[nzShowExpand]` | 节点前添加展开图标 | `boolean` | `true` | | +| `[nzShowLine]` | 是否展示连接线 | `boolean` | `false` | | | `[nzAsyncData]` | 是否异步加载(显示加载状态) | `boolean` | `false` | | `[nzNodes]` | treeNodes 数据 | `NzTreeNodeOptions[]` | `[]` | | `[nzDefaultExpandAll]` | 默认展开所有树节点 | `boolean` | `false` | diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts index fd4f24197dd..ec8af25c66f 100644 --- a/components/tree-select/nz-tree-select.component.ts +++ b/components/tree-select/nz-tree-select.component.ts @@ -40,6 +40,7 @@ import { warnDeprecation, zoomMotion, InputBoolean, + NzConfigService, NzFormatEmitEvent, NzNoAnimationDirective, NzSizeLDSType, @@ -47,7 +48,8 @@ import { NzTreeBaseService, NzTreeHigherOrderServiceToken, NzTreeNode, - NzTreeNodeOptions + NzTreeNodeOptions, + WithConfig } from 'ng-zorro-antd/core'; import { NzTreeComponent } from 'ng-zorro-antd/tree'; @@ -99,14 +101,14 @@ export function higherOrderServiceFactory(injector: Injector): NzTreeBaseService ] }) export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAccessor, OnInit, OnDestroy, OnChanges { - @Input() @InputBoolean() nzAllowClear = true; - @Input() @InputBoolean() nzShowExpand = true; - @Input() @InputBoolean() nzShowLine = false; - @Input() @InputBoolean() nzDropdownMatchSelectWidth = true; - @Input() @InputBoolean() nzCheckable = false; - @Input() @InputBoolean() nzHideUnMatched = false; - @Input() @InputBoolean() nzShowIcon = false; - @Input() @InputBoolean() nzShowSearch = false; + @Input() @InputBoolean() nzAllowClear: boolean = true; + @Input() @InputBoolean() nzShowExpand: boolean = true; + @Input() @InputBoolean() nzShowLine: boolean = false; + @Input() @InputBoolean() @WithConfig(true) nzDropdownMatchSelectWidth: boolean; + @Input() @InputBoolean() nzCheckable: boolean = false; + @Input() @InputBoolean() @WithConfig(false) nzHideUnMatched: boolean; + @Input() @InputBoolean() @WithConfig(false) nzShowIcon: boolean; + @Input() @InputBoolean() nzShowSearch: boolean = false; @Input() @InputBoolean() nzDisabled = false; @Input() @InputBoolean() nzAsyncData = false; @Input() @InputBoolean() nzMultiple = false; @@ -115,7 +117,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc @Input() nzNotFoundContent: string; @Input() nzNodes: Array = []; @Input() nzOpen = false; - @Input() nzSize: NzSizeLDSType = 'default'; + @Input() @WithConfig('default') nzSize: NzSizeLDSType; @Input() nzPlaceHolder = ''; @Input() nzDropdownStyle: { [key: string]: string }; /** @@ -208,6 +210,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc constructor( nzTreeService: NzTreeSelectService, + public nzConfigService: NzConfigService, private renderer: Renderer2, private cdr: ChangeDetectorRef, private elementRef: ElementRef, diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md index 630c54a3be1..3ce6271dd93 100644 --- a/components/tree/doc/index.en-US.md +++ b/components/tree/doc/index.en-US.md @@ -20,19 +20,19 @@ import { NzTreeModule } from 'ng-zorro-antd/tree'; ### nz-tree -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | | `[nzData]` | Tree data (Reference NzTreeNode) | `NzTreeNodeOptions[] \| NzTreeNode[]` | `[]` | -| `[nzBlockNode]` | Whether treeNode fill remaining horizontal space | `boolean` | `false` | +| `[nzBlockNode]` | Whether treeNode fill remaining horizontal space | `boolean` | `false` | ✅ | | `[nzCheckable]` | Adds a Checkbox before the treeNodes| `boolean` | `false` | -| `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` | -| `[nzShowLine]` | Shows a connecting line | `boolean` | `false` | +| `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` | | +| `[nzShowLine]` | Shows a connecting line | `boolean` | `false` | | | `[nzExpandedIcon]` | Customize an expand icon | `TemplateRef<{ $implicit: NzTreeNode }>` | - | -| `[nzShowIcon]` | Shows the icon before a TreeNode's title. There is no default style | `boolean` | `false` | +| `[nzShowIcon]` | Shows the icon before a TreeNode's title. There is no default style | `boolean` | `false` | ✅ | | `[nzAsyncData]` | Load data asynchronously (should be used with NzTreeNode.addChildren(...)) | `boolean` | `false` | | `[nzDraggable]` | Specifies whether this Tree is draggable (IE > 8) | `boolean` | `false` | | `[nzMultiple]` | Allows selecting multiple treeNodes | `boolean` | `false` | -| `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` | +| `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` | ✅ | | `[nzCheckStrictly]` | Check treeNode precisely; parent treeNode and children treeNodes are not associated | `boolean` | `false` | | `[nzExpandAll]` | Whether to expand all treeNodes | `boolean` | `false` | | `[nzExpandedKeys]` | Specify the keys of the default expanded treeNodes | `string[]` | `[]` | @@ -133,4 +133,4 @@ import { NzTreeModule } from 'ng-zorro-antd/tree'; ## Note * `NzTreeNodeOptions` accepts your customized properties，use NzTreeNode.origin to get them. * If Tree Methods used with ViewChild, should be used in ngAfterViewInit. -* Setting NzData with NzTreeNodeOptions[] is better，if you set nzData with NzTreeNode[], it will be deprecated in next major version(8.x). \ No newline at end of file +* Setting NzData with NzTreeNodeOptions[] is better，if you set nzData with NzTreeNode[], it will be deprecated in next major version(8.x). diff --git a/components/tree/doc/index.zh-CN.md b/components/tree/doc/index.zh-CN.md index 864636d1dbf..e4f9787c14f 100644 --- a/components/tree/doc/index.zh-CN.md +++ b/components/tree/doc/index.zh-CN.md @@ -21,20 +21,20 @@ import { NzTreeModule } from 'ng-zorro-antd/tree'; ### nz-tree -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzData]` | 元数据 | `NzTreeNodeOptions[] \| NzTreeNode[]` | `[]` | -| `[nzBlockNode]` | 是否节点占据一行 | `boolean` | `false` | +| `[nzBlockNode]` | 是否节点占据一行 | `boolean` | `false` | ✅ | | `[nzCheckable]` | 节点前添加 Checkbox 复选框 | `boolean` | `false` | -| `[nzShowExpand]` | 节点前添加展开图标 | `boolean` | `true` | -| `[nzShowLine]` | 是否展示连接线 | `boolean` | `false` | +| `[nzShowExpand]` | 节点前添加展开图标 | `boolean` | `true` | | +| `[nzShowLine]` | 是否展示连接线 | `boolean` | `false` | | | `[nzExpandedIcon]` | 自定义展开图标 | `TemplateRef<{ $implicit: NzTreeNode }>` | - | -| `[nzShowIcon]` | 是否展示 TreeNode title 前的图标，没有默认样式 | `boolean` | `false` | +| `[nzShowIcon]` | 是否展示 TreeNode title 前的图标，没有默认样式 | `boolean` | `false` | ✅ | | `[nzAsyncData]` | 是否异步加载(显示加载状态) | `boolean` | `false` | -| `[nzDraggable]` | 设置节点可拖拽（IE>8） | `boolean` | `false` | +| `[nzDraggable]` | 设置节点可拖拽 | `boolean` | `false` | | `[nzMultiple]` | 支持点选多个节点（节点本身） | `boolean` | `false` | -| `[nzHideUnMatched]` | 搜索隐藏未匹配的节点 | `boolean` | `false` | -| `[nzCheckStrictly]` | checkable状态下节点选择完全受控（父子节点选中状态不再关联） | `boolean` | `false` | +| `[nzHideUnMatched]` | 搜索隐藏未匹配的节点 | `boolean` | `false` | ✅ | +| `[nzCheckStrictly]` | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | `boolean` | `false` | | `[nzExpandAll]` | 默认展开所有树节点 | `boolean` | `false` | | `[nzExpandedKeys]` | 展开指定的树节点 | `string[]` | `[]` | | `[nzCheckedKeys]` | 指定选中复选框的树节点 | `string[]` | `[]` | @@ -137,4 +137,4 @@ import { NzTreeModule } from 'ng-zorro-antd/tree'; ## 注意 * `NzTreeNodeOptions` 可以接受用户自定义属性，可通过 `NzTreeNode` 的 `origin` 属性取得。 * 使用 ViewChild 时，Tree 方法需要在 ngAfterViewInit 中调用。 -* nzData 属性请传递 NzTreeNodeOptions 数组，传递 NzTreeNode 数组模式将在 8.x 版本取消兼容。 \ No newline at end of file +* nzData 属性请传递 NzTreeNodeOptions 数组，传递 NzTreeNode 数组模式将在 8.x 版本取消兼容。 diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts index af1b620dbde..073f13d0eb2 100644 --- a/components/tree/nz-tree.component.ts +++ b/components/tree/nz-tree.component.ts @@ -33,13 +33,15 @@ import { toBoolean, warnDeprecation, InputBoolean, + NzConfigService, NzFormatBeforeDropEvent, NzFormatEmitEvent, NzNoAnimationDirective, NzTreeBase, NzTreeBaseService, NzTreeHigherOrderServiceToken, - NzTreeNode + NzTreeNode, + WithConfig } from 'ng-zorro-antd/core'; import { NzTreeService } from './nz-tree.service'; @@ -71,18 +73,18 @@ export function NzTreeServiceFactory( ] }) export class NzTreeComponent extends NzTreeBase implements OnInit, OnDestroy, ControlValueAccessor, OnChanges { - @Input() @InputBoolean() nzShowIcon = false; - @Input() @InputBoolean() nzShowExpand = true; + @Input() @InputBoolean() @WithConfig(false) nzShowIcon: boolean; + @Input() @InputBoolean() nzShowExpand: boolean = true; @Input() @InputBoolean() nzShowLine = false; @Input() nzExpandedIcon: TemplateRef<{ $implicit: NzTreeNode }>; @Input() @InputBoolean() nzCheckable = false; @Input() @InputBoolean() nzAsyncData = false; - @Input() @InputBoolean() nzDraggable = false; + @Input() @InputBoolean() nzDraggable: boolean = false; - @Input() @InputBoolean() nzHideUnMatched = false; + @Input() @InputBoolean() @WithConfig(false) nzHideUnMatched: boolean; @Input() @InputBoolean() nzSelectMode = false; @Input() @InputBoolean() nzCheckStrictly = false; - @Input() @InputBoolean() nzBlockNode = false; + @Input() @WithConfig(false) @InputBoolean() nzBlockNode: boolean; @Input() @InputBoolean() nzExpandAll = false; @Input() nzTreeTemplate: TemplateRef<{ $implicit: NzTreeNode }>; @@ -262,6 +264,7 @@ export class NzTreeComponent extends NzTreeBase implements OnInit, OnDestroy, Co constructor( nzTreeService: NzTreeBaseService, + public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, @Host() @Optional() public noAnimation?: NzNoAnimationDirective ) { diff --git a/components/typography/doc/index.en-US.md b/components/typography/doc/index.en-US.md index b1f3f564332..58ba25629da 100644 --- a/components/typography/doc/index.en-US.md +++ b/components/typography/doc/index.en-US.md @@ -18,16 +18,16 @@ Basic text writing, including headings, body text, lists, and more. > `p[nz-paragraph]`, `span[nz-text]`, `h1[nz-title]`, `h2[nz-title]`, `h3[nz-title]`, `h4[nz-title]` are used in the same way as the `[nz-typography]` -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzContent]` | Component content | `string` | - | -| `[nzCopyable]` | Can copy, require use `[nzContent]` | `boolean` | `false` | -| `[nzEditable]` | Editable, require use `[nzContent]` | `boolean` | `false` | -| `[nzEllipsis]` | Display ellipsis when overflow, require use `[nzContent]` when dynamic content | `boolean` | `false` | -| `[nzCopyText]` | Customize the copy text | `string` | - | -| `[nzDisabled]` | Disable content | `boolean` | `false` | -| `[nzExpandable]` | Expandable when ellipsis | `boolean` | `false` | -| `[nzEllipsisRows]` | Line number | `number` | `1` | -| `[nzType]` | Content type | `'secondary'｜'warning'｜'danger'` | - | -| `(nzContentChange)` | Trigger when user edit the content | `EventEmitter` | - | -| `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter` | - | \ No newline at end of file +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | +| `[nzContent]` | Component content | `string` | - || +| `[nzCopyable]` | Can copy, require use `[nzContent]` | `boolean` | `false` || +| `[nzEditable]` | Editable, require use `[nzContent]` | `boolean` | `false` || +| `[nzEllipsis]` | Display ellipsis when overflow, require use `[nzContent]` when dynamic content | `boolean` | `false` || +| `[nzCopyText]` | Customize the copy text | `string` | - || +| `[nzDisabled]` | Disable content | `boolean` | `false` || +| `[nzExpandable]` | Expandable when ellipsis | `boolean` | `false` || +| `[nzEllipsisRows]` | Line number | `number` | `1` | ✅ | +| `[nzType]` | Content type | `'secondary'｜'warning'｜'danger'` | - || +| `(nzContentChange)` | Trigger when user edit the content | `EventEmitter` | - || +| `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter` | - || \ No newline at end of file diff --git a/components/typography/doc/index.zh-CN.md b/components/typography/doc/index.zh-CN.md index e376a96b41d..f15a6f7bc73 100644 --- a/components/typography/doc/index.zh-CN.md +++ b/components/typography/doc/index.zh-CN.md @@ -18,8 +18,8 @@ cols: 1 > `p[nz-paragraph]`, `span[nz-text]`, `h1[nz-title]`, `h2[nz-title]`, `h3[nz-title]`, `h4[nz-title]` 的使用方法与 `[nz-typography]` 相同 -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | | `[nzContent]` | 组件内容 | `string` | - | | `[nzCopyable]` | 是否可拷贝，需要配合 `[nzContent]` 使用 | `boolean` | `false` | | `[nzEditable]` | 是否可编辑，是否可拷贝，需要配合 `[nzContent]` 使用 | `boolean` | `false` | @@ -27,7 +27,7 @@ cols: 1 | `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` | | `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - | | `[nzDisabled]` | 禁用文本 | `boolean` | `false` | -| `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` | +| `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` | ✅ | | `[nzType]` | 文本类型 | `'secondary'｜'warning'｜'danger'` | - | | `(nzContentChange)` | 当用户提交编辑内容时触发 | `EventEmitter` | - | | `(nzExpandChange)` | 展开省略文本时触发 | `EventEmitter` | - | diff --git a/components/typography/nz-typography.component.ts b/components/typography/nz-typography.component.ts index 7830ad763aa..2774fad0460 100644 --- a/components/typography/nz-typography.component.ts +++ b/components/typography/nz-typography.component.ts @@ -37,7 +37,10 @@ import { measure, reqAnimFrame, InputBoolean, - NzDomEventService + InputNumber, + NzConfigService, + NzDomEventService, + WithConfig } from 'ng-zorro-antd/core'; import { NzI18nService } from 'ng-zorro-antd/i18n'; @@ -77,7 +80,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, @Input() @InputBoolean() nzExpandable = false; @Input() @InputBoolean() nzEllipsis = false; @Input() nzContent: string; - @Input() nzEllipsisRows = 1; + @Input() @WithConfig(1) @InputNumber() nzEllipsisRows: number; @Input() nzType: 'secondary' | 'warning' | 'danger' | undefined; @Input() nzCopyText: string | undefined; @Output() readonly nzContentChange = new EventEmitter(); @@ -112,6 +115,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, } constructor( + public nzConfigService: NzConfigService, private host: ElementRef, private cdr: ChangeDetectorRef, private viewContainerRef: ViewContainerRef, diff --git a/docs/animations.en-US.md b/docs/animations.en-US.md index 6795c349bde..c9dee02bc30 100644 --- a/docs/animations.en-US.md +++ b/docs/animations.en-US.md @@ -1,5 +1,5 @@ --- -order: 7 +order: 8 title: Animations Switch --- @@ -68,4 +68,4 @@ Some component use dynamic style to support wave effect, You can set the provide } ] }) -``` \ No newline at end of file +``` diff --git a/docs/animations.zh-CN.md b/docs/animations.zh-CN.md index f4ba9762ed2..ec533464ae2 100644 --- a/docs/animations.zh-CN.md +++ b/docs/animations.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 7 +order: 8 title: 动画开关 --- @@ -67,4 +67,4 @@ NG-ZORRO 允许开发者关闭动画效果，您可以通过添加对应指令 } ] }) -``` \ No newline at end of file +``` diff --git a/docs/changelog.en-US.md b/docs/changelog.en-US.md index 5e8af0da6fb..4813c6b2203 100755 --- a/docs/changelog.en-US.md +++ b/docs/changelog.en-US.md @@ -1,5 +1,5 @@ --- -order: 11 +order: 12 title: Change Log toc: false timeline: true diff --git a/docs/changelog.zh-CN.md b/docs/changelog.zh-CN.md index 1bfe5071961..c90564272dd 100755 --- a/docs/changelog.zh-CN.md +++ b/docs/changelog.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 11 +order: 12 title: 更新日志 toc: false timeline: true diff --git a/docs/contributing.en-US.md b/docs/contributing.en-US.md index 43946dbc6e1..cbb08867bff 100644 --- a/docs/contributing.en-US.md +++ b/docs/contributing.en-US.md @@ -1,5 +1,5 @@ --- -order: 10 +order: 11 title: How to Contribute --- diff --git a/docs/contributing.zh-CN.md b/docs/contributing.zh-CN.md index 2680c95b290..5a53706d2a6 100644 --- a/docs/contributing.zh-CN.md +++ b/docs/contributing.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 10 +order: 11 title: 贡献指南 --- diff --git a/docs/faq.en-US.md b/docs/faq.en-US.md index 336fd2c9b97..2f0b924eda9 100644 --- a/docs/faq.en-US.md +++ b/docs/faq.en-US.md @@ -1,5 +1,5 @@ --- -order: 9 +order: 10 title: FAQ --- diff --git a/docs/faq.zh-CN.md b/docs/faq.zh-CN.md index de12077ca2e..d9782b170e1 100644 --- a/docs/faq.zh-CN.md +++ b/docs/faq.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 9 +order: 10 title: 常见问题 --- diff --git a/docs/global-config.en-US.md b/docs/global-config.en-US.md new file mode 100644 index 00000000000..0c4b7f8af3e --- /dev/null +++ b/docs/global-config.en-US.md @@ -0,0 +1,75 @@ +--- +order: 7 +title: Global Configuration +--- + +From version 8.3.0, we add support of **global configuration** to many components. You can define the default behavior of the component through global configuration, thus reducing the code that needs to be written in the template, and implement feature that is similar to switching themes. + +

    The injection tokens provided by components previously will be removed in the 9.x versions. Please migrate to the new API NZ_CONFIG.

    + +## How to Use? + +If you want to provide default configurations to some components, you should provide an object that implements the interface `NzConfig` with the injection token `NZ_CONFIG`, in the root module (in another word, to the root injector). Like this: + +```typescript +import { NgZorroAntdModule, NzConfig, NZ_CONFIG } from 'ng-zorro-antd'; + +const ngZorroConfig: NzConfig = { + message: { nzTop: 120 }, + notification: { nzTop: 240 } +}; + +@NgModule({ + declarations: [AppComponent], + imports: [ + CommonModule + NgZorroAntdModule, + ], + providers: [ + { provide: NZ_CONFIG, useValue: ngZorroConfig } + ], + bootstrap: [AppComponent] +}) +export class AppModule {} +``` + +These global configuration would be injected into a service named `NzConfigService` and gets stored. + +## Dynamically Chaing Configs + +You can change the global config of a specific component by calling the `set` method of `NzConfigService`. For example, if you want to make all buttons to be barge in size by default, you should: + +```typescript +import { NzConfigService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-change-zorro-config' +}) +export class ChangeZorroConfigComponent { + constructor(private nzConfigService: NzConfigService) {} + + onChangeConfig() { + // Grandpa: Oh, I like that! + this.nzConfigService.set('button', { nzSize: 'large' }) + } +} +``` + +## Priority of Global Configurations + +For any property that supports global configuration, the sequence of priority is as follow: + +**Parameters passed to an component instance (in templates or methods like `service.create` > global config provided with the injection token `NZ_CONFIG` > global config provided with legacy injection tokens > default value in ng-zorro-antd** + +For example, if you want to create a `NzNotification` component: + +1. When you call `NzNotificationService.success`, you passed `{ nzDuration: 6000 }` as the third parameter +2. You provide `{ notification: { nzDuration: 5000 } }` with `NZ_CONFIG` +3. You provide `{ nzDuration: 4000 }` with `NZ_NOTIFICATION_CONFIG` +4. ng-zorro-antd has a default value of 4500 + +Eventually, this notification would keep open for 6000 milliseconds. + +## Check all Available Globally Configurable Parameters + +The interface `NzConfig` can provide completion suggestions of all components and parameters that are globally configurable. You can also check components' API for more details. diff --git a/docs/global-config.zh-CN.md b/docs/global-config.zh-CN.md new file mode 100644 index 00000000000..84f06ac6a24 --- /dev/null +++ b/docs/global-config.zh-CN.md @@ -0,0 +1,78 @@ +--- +order: 7 +title: 全局配置项 +--- + +从 8.3.0 版本开始，我们给众多组件添加了**全局配置**功能，你可以通过全局配置来定义组件的默认行为，从而减少在模板中需要写的代码（让你的代码更加清爽），还能实现类似于切换主题的功能。 + +

    之前各组件单独提供的注入令牌将会在 ng-zorro-antd 9.x 版本中移除，请及时迁移！

    + +## 如何使用 + +想要为某些组件提供默认配置项，请在根注入器中根据注入令牌 `NZ_CONFIG` 提供一个符合 `NzConfig` 接口的对象，例如： + +```typescript +import { NgZorroAntdModule, NzConfig, NZ_CONFIG } from 'ng-zorro-antd'; + +const ngZorroConfig: NzConfig = { + // 注意没有 nz 前缀 + message: { nzTop: 120 }, + notification: { nzTop: 240 } +}; + +@NgModule({ + declarations: [AppComponent], + imports: [ + CommonModule + NgZorroAntdModule, + ], + providers: [ + { provide: NZ_CONFIG, useValue: ngZorroConfig } + ], + bootstrap: [AppComponent] +}) +export class AppModule {} +``` + +这些全局配置项将会被注入 `NzConfigService` 当中并保存。 + +## 动态变更 + +你可以通过调用 `NzConfigService` 的 `set` 方法来改变某个组件的全局配置项，例如： + +```typescript +import { NzConfigService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-change-zorro-config' +}) +export class ChangeZorroConfigComponent { + constructor(private nzConfigService: NzConfigService) {} + + onChangeConfig() { + // 爷爷：我就喜欢大号字！ + this.nzConfigService.set('button', { nzSize: 'large' }) + } +} +``` + +所有的组件实例都会响应这些改变（只要它们没有被单独赋值）。 + +## 全局配置项的优先级 + +对于任何一个属性来说，各个来源的值的优先级如下： + +**为组件的某个实例单独设置的值（通过模板或类似于 `service.create` 的方法）> 通过 `NZ_CONFIG` 提供的全局默认值（包括 `set` 方法） > 通过老的 API 提供的全局默认值 > NG-ZORRO 内置的默认值。** + +例如，你想创建一个 NzNotification 组件： + +1. 你在调用 `NzNotificationService.success` 时传递参数 `{ nzDuration: 6000 }` +2. 你通过 `NZ_CONFIG` 提供了全局默认值 `{ notification: { nzDuration: 5000 } }` +3. 你通过 `NZ_NOTIFICATION_CONFIG` 提供了全局默认值 `{ nzDuration: 4000 }` +4. NG-ZORRO 内部默认值为 4500 + +最终该 Notification 将会显示 6000 毫秒。 + +## 查看所有可用的全局配置项 + +`NzConfig` 接口提供的类型定义信息能够帮助你找到所有支持全局配置项的组件和属性。另外，每个组件的文档都会指出哪些属性可以通过全局配置项的方式指定。 diff --git a/docs/recommendation.en-US.md b/docs/recommendation.en-US.md index c256170303d..621694793a5 100644 --- a/docs/recommendation.en-US.md +++ b/docs/recommendation.en-US.md @@ -1,5 +1,5 @@ --- -order: 8 +order: 9 title: Resources --- diff --git a/docs/recommendation.zh-CN.md b/docs/recommendation.zh-CN.md index 20ed0797d47..cce6a75080d 100644 --- a/docs/recommendation.zh-CN.md +++ b/docs/recommendation.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 8 +order: 9 title: 资源推荐 --- diff --git a/scripts/site/_site/doc/app/app.component.html b/scripts/site/_site/doc/app/app.component.html index 79d50666904..c260b7411de 100644 --- a/scripts/site/_site/doc/app/app.component.html +++ b/scripts/site/_site/doc/app/app.component.html @@ -371,4 +371,4 @@

- \ No newline at end of file + diff --git a/scripts/site/_site/doc/app/app.module.ts b/scripts/site/_site/doc/app/app.module.ts index 258df85a572..b2e39d72871 100644 --- a/scripts/site/_site/doc/app/app.module.ts +++ b/scripts/site/_site/doc/app/app.module.ts @@ -16,7 +16,7 @@ import { NzMessageModule, NzPopoverModule, NzSelectModule, - NZ_ICON_DEFAULT_TWOTONE_COLOR, + NZ_CONFIG, NZ_ICONS } from 'ng-zorro-antd'; @@ -51,7 +51,7 @@ const icons: IconDefinition[] = [LeftOutline, RightOutline]; providers: [ Title, { provide: NZ_ICONS, useValue: icons }, - { provide: NZ_ICON_DEFAULT_TWOTONE_COLOR, useValue: '#1890ff' } + { provide: NZ_CONFIG, useValue: { icon: { nzTwotoneColor: '#1890ff' } }} ], bootstrap: [AppComponent] })