diff --git a/components/input-number/demo/borderless.md b/components/input-number/demo/borderless.md new file mode 100644 index 0000000000..4f3ea028a8 --- /dev/null +++ b/components/input-number/demo/borderless.md @@ -0,0 +1,15 @@ +--- +order: 0 +title: + zh-CN: 无边框 + en-US: Borderless +--- + +## zh-CN + +没有边框。 + +## en-US + +Borderless input number. + diff --git a/components/input-number/demo/borderless.ts b/components/input-number/demo/borderless.ts new file mode 100644 index 0000000000..2cd6a01da1 --- /dev/null +++ b/components/input-number/demo/borderless.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-input-number-borderless', + template: ` ` +}) +export class NzDemoInputNumberBorderlessComponent { + demoValue = 3; +} diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts index 1b5e7e2c63..8850895b63 100644 --- a/components/input-number/input-number.component.ts +++ b/components/input-number/input-number.component.ts @@ -109,13 +109,15 @@ import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/ '[class.ant-input-number-sm]': `nzSize === 'small'`, '[class.ant-input-number-disabled]': 'nzDisabled', '[class.ant-input-number-readonly]': 'nzReadOnly', - '[class.ant-input-number-rtl]': `dir === 'rtl'` + '[class.ant-input-number-rtl]': `dir === 'rtl'`, + '[class.ant-input-number-borderless]': `nzBorderless` } }) export class NzInputNumberComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy { static ngAcceptInputType_nzDisabled: BooleanInput; static ngAcceptInputType_nzReadOnly: BooleanInput; static ngAcceptInputType_nzAutoFocus: BooleanInput; + static ngAcceptInputType_nzBorderless: BooleanInput; private autoStepTimer?: number; private parsedValue?: string | number; @@ -133,6 +135,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn hasFeedback: boolean = false; onChange: OnChangeType = () => {}; onTouched: OnTouchedType = () => {}; + @Output() readonly nzBlur = new EventEmitter(); @Output() readonly nzFocus = new EventEmitter(); /** The native `` element. */ @@ -159,6 +162,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn @Input() @InputBoolean() nzDisabled = false; @Input() @InputBoolean() nzReadOnly = false; @Input() @InputBoolean() nzAutoFocus = false; + @Input() @InputBoolean() nzBorderless: boolean = false; @Input() nzFormatter: (value: number) => string | number = value => value; onModelChange(value: string): void { diff --git a/components/input-number/input-number.spec.ts b/components/input-number/input-number.spec.ts index 89045e334f..92cb099918 100644 --- a/components/input-number/input-number.spec.ts +++ b/components/input-number/input-number.spec.ts @@ -63,6 +63,13 @@ describe('input number', () => { expect(inputNumber.nativeElement.classList).toContain('ant-input-number'); expect(inputElement.getAttribute('placeholder')).toBe('placeholder'); }); + it('should border work', () => { + fixture.detectChanges(); + expect(inputNumber.nativeElement!.classList).not.toContain('ant-input-number-borderless'); + testComponent.bordered = false; + fixture.detectChanges(); + expect(inputNumber.nativeElement!.classList).toContain('ant-input-number-borderless'); + }); it('should focus className correct', fakeAsync(() => { fixture.detectChanges(); expect(inputNumber.nativeElement.classList).toContain('ng-untouched'); @@ -608,6 +615,7 @@ describe('input number', () => { [nzParser]="parser" [nzPrecision]="precision" [nzPrecisionMode]="precisionMode" + [nzBorderless]="!bordered" > ` }) @@ -621,6 +629,7 @@ export class NzTestInputNumberBasicComponent { size = 'default'; placeholder = 'placeholder'; step = 1; + bordered = true; precision?: number = 2; precisionMode?: 'cut' | 'toFixed' | ((value: number | string, precision?: number) => number); formatter = (value: number): string => (value !== null ? `${value}` : '');