diff --git a/components/time-picker/demo/bordered.md b/components/time-picker/demo/bordered.md new file mode 100644 index 0000000000..3260df8f07 --- /dev/null +++ b/components/time-picker/demo/bordered.md @@ -0,0 +1,14 @@ +--- +order: 12 +title: + zh-CN: 无边框 + en-US: Bordered-less +--- + +## zh-CN + +无边框样式。 + +## en-US + +Bordered-less style component. \ No newline at end of file diff --git a/components/time-picker/demo/bordered.ts b/components/time-picker/demo/bordered.ts new file mode 100644 index 0000000000..ea0f2cccf3 --- /dev/null +++ b/components/time-picker/demo/bordered.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-time-picker-bordered', + template: ` `, + styles: [] +}) +export class NzDemoTimePickerBorderedComponent {} diff --git a/components/time-picker/doc/index.en-US.md b/components/time-picker/doc/index.en-US.md index 922487878f..e761734034 100644 --- a/components/time-picker/doc/index.en-US.md +++ b/components/time-picker/doc/index.en-US.md @@ -46,6 +46,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; | `[nzSecondStep]` | interval between seconds in picker | `number` | `1` | ✅ | | `[nzSize]` | width of time picker box | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | +| `[nzBorderless]` | remove the border | `boolean` | `false` | - | | `[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` | `''` | ✅ | diff --git a/components/time-picker/doc/index.zh-CN.md b/components/time-picker/doc/index.zh-CN.md index 09f2b74794..d7c3457c3c 100644 --- a/components/time-picker/doc/index.zh-CN.md +++ b/components/time-picker/doc/index.zh-CN.md @@ -47,6 +47,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; | `[nzSecondStep]` | 秒选项间隔 | `number` | `1` | ✅ | | `[nzSize]` | 时间选择框大小 | `'large'\|'small'\|'default'` | `'default'` | | `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | +| `[nzBorderless]` | 移除边框 | `boolean` | `false` | - | | `[nzOpen]` | 面板是否打开,可双向绑定 | `boolean` | `false` | | `[nzPlaceHolder]` | 没有值的时候显示的内容 | `string` | `"请选择时间"` | | `[nzPopupClassName]` | 弹出层类名 | `string` | `''` | ✅ | diff --git a/components/time-picker/time-picker.component.spec.ts b/components/time-picker/time-picker.component.spec.ts index 35b153db55..3b20b67acd 100644 --- a/components/time-picker/time-picker.component.spec.ts +++ b/components/time-picker/time-picker.component.spec.ts @@ -276,7 +276,11 @@ describe('time-picker', () => { expect(result.getMinutes()).toEqual(10); expect(result.getSeconds()).toEqual(30); })); - + it('should support nzBorderless', fakeAsync(() => { + fixture.componentInstance.nzBorderless = true; + fixture.detectChanges(); + expect(fixture.debugElement.query(By.css(`.ant-picker-borderless`))).toBeDefined(); + })); describe('setup I18n service', () => { let srv: NzI18nService; @@ -397,6 +401,7 @@ describe('time-picker', () => { [nzSuffixIcon]="nzSuffixIcon" [nzBackdrop]="nzBackdrop" [nzDefaultOpenValue]="defaultOpenValue" + [nzBorderless]="nzBorderless" > ` }) @@ -409,6 +414,7 @@ export class NzTestTimePickerComponent { use12Hours = false; nzSuffixIcon?: string; nzBackdrop = false; + nzBorderless = true; defaultOpenValue: Date | null = new Date('2020-03-27T00:00:00'); onChange(_: Date | null): void {} @ViewChild(NzTimePickerComponent, { static: false }) nzTimePickerComponent!: NzTimePickerComponent; diff --git a/components/time-picker/time-picker.component.ts b/components/time-picker/time-picker.component.ts index b6416e93f1..108e009973 100644 --- a/components/time-picker/time-picker.component.ts +++ b/components/time-picker/time-picker.component.ts @@ -122,6 +122,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker'; '[class.ant-picker-disabled]': `nzDisabled`, '[class.ant-picker-focused]': `focused`, '[class.ant-picker-rtl]': `dir === 'rtl'`, + '[class.ant-picker-borderless]': `nzBorderless`, '(click)': 'open()' }, animations: [slideMotion], @@ -135,6 +136,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte static ngAcceptInputType_nzAllowEmpty: BooleanInput; static ngAcceptInputType_nzDisabled: BooleanInput; static ngAcceptInputType_nzAutoFocus: BooleanInput; + static ngAcceptInputType_nzBorderless: BooleanInput; private _onChange?: (value: Date | null) => void; private _onTouched?: () => void; @@ -213,6 +215,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte @Input() @InputBoolean() nzDisabled = false; @Input() @InputBoolean() nzAutoFocus = false; @Input() @WithConfig() nzBackdrop = false; + @Input() @InputBoolean() nzBorderless: boolean = false; emitValue(value: Date | null): void { this.setValue(value, true);