ng-zorro-antd-extend

非官方 ng-zorro-antd 扩展包

使用

import { NgZorroAntdExtendModule } from 'ng-zorro-antd-extend';

@NgModule({
  imports: [ NgZorroAntdExtendModule ]
})
export class AppModule {
}

{
  "styles": [
+   "./node_modules/ng-zorro-antd-extend/ng-zorro-antd-extend.css"
  ]
}

统计时间组件 -- <nze-range-date-picker>

<nze-range-date-picker [(ngModel)]="rangeDatePickerValue" [isThisWeek]="false"></nze-range-date-picker>

属性	说明	类型	默认值
[isThisWeek]	起始是否为本周，否则本月	boolean	true
[isHaveEndTime]	结束日期是否带有时间 （HHss）	boolean	false
[todayIsThisMonthEnd]	本月中 当天为月的结束时间	boolean	true
[weekIsStretch]	首周和最后一周 是否向上下延伸	boolean	true
(selectChange)	选中事件	EventEmitter<Array<Date>>	-

时间范围 管道 -- nzeDateRange

{{rangeDatePickerValue | nzeDateRange: {char: '/'} }}

属性	说明	类型	默认值
[char]	日期分隔符	string	/
[isHaveTime]	日期是否带有时间 （HHss）	boolean	false
[connectChar]	两个日期之间连接符	string	~

PS: Angular自带 管道

date {{date | date: "yyyy-MM-dd"}}

范围时间组件 -- <nze-range-picker>

<nze-range-picker [(ngModel)]="rangePickerValue" [isConstraint]="true"></nze-range-picker>

属性	说明	类型	默认值
[isHaveEndTime]	结束日期是否带有时间 （2359）	boolean	false
[isConstraint]	约束时间范围在31天内	boolean	false
[defaultDateType]	默认时间类型 undefined、day、week、month	string	undefined
(selectChange)	选中事件	EventEmitter<Array<Date>>	-

大小写转换 管道 -- nzeDigitUppercase

{{num | nzeDigitUppercase}}

图片视图 -- NzeImagesViewService

constructor(private nzeImagesViewService: NzeImagesViewService) {}

+ this.nzeImagesViewService.showImage('', 0);

+ this.nzeImagesViewService.showImages(['', '', ''], 0);

Card Title扩展 -- nze-card-title

可以把 card 的 title 分成三个区域，主要为了中间区域居中。同时抛弃 card 的 [nzExtra] 属性。

目的为了将来扩展 card title 的更丰富的使用。比如关键字检索等。

<nz-card [nzTitle]="titleTpl">

</nz-card>
<ng-template #titleTpl>
  <nze-card-title>
    <div class="nze-card-title-left">Card Title扩展</div>
    <div class="nze-card-title-center">
      <nz-radio-group [(ngModel)]="radioValue" [nzButtonStyle]="'solid'">
        <label nz-radio-button nzValue="A">AAAA</label>
        <label nz-radio-button nzValue="B">BBBB</label>
      </nz-radio-group>
    </div>
    <div class="nze-card-title-right">
      <button nz-button nzType="primary">添加</button>
    </div>
  </nze-card-title>
</ng-template>