非官方 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] | 结束日期是否带有时间 （HH:mm:ss） | boolean | false [todayIsThisMonthEnd] | 本月中 当天为月的结束时间 | boolean | true [weekIsStretch] | 首周和最后一周 是否向上下延伸 | boolean | true (selectChange) | 选中事件 | EventEmitter<Array<Date>> | -

时间范围 管道 -- nzeDateRange

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

属性|说明|类型|默认值 -|-|-|- [char] | 日期分隔符 | string | / [isHaveTime] | 日期是否带有时间 （HH:mm:ss） | 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] | 结束日期是否带有时间 （23:59:59） | 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>