diff --git a/components/button/demo/block.md b/components/button/demo/block.md new file mode 100755 index 00000000000..9b08b67c43a --- /dev/null +++ b/components/button/demo/block.md @@ -0,0 +1,14 @@ +--- +order: 9 +title: + zh-CN: Block 按钮 + en-US: Block Button +--- + +## zh-CN + +`nzBlock` 属性将使按钮适合其父宽度。 + +## en-US + +`nzBlock` property will make the button fit to its parent width. diff --git a/components/button/demo/block.ts b/components/button/demo/block.ts new file mode 100644 index 00000000000..523bcc202e4 --- /dev/null +++ b/components/button/demo/block.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-button-block', + template: ` + + + + `, + styles : [ + ` + [nz-button] { + margin-bottom: 12px; + } + ` + ] +}) +export class NzDemoButtonBlockComponent { +} diff --git a/components/button/doc/index.en-US.md b/components/button/doc/index.en-US.md index c928202d8f4..34d456cdea1 100644 --- a/components/button/doc/index.en-US.md +++ b/components/button/doc/index.en-US.md @@ -23,3 +23,4 @@ To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`di | `[nzShape]` | can be set to `circle` or omitted | string | - | | `[nzSize]` | can be set to `small` `large` or omitted | string | `default` | | `[nzType]` | can be set to `primary` `ghost` `dashed` `danger` or omitted (meaning `default`) | string | `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 e07c5e048cf..18e56aae39d 100644 --- a/components/button/doc/index.zh-CN.md +++ b/components/button/doc/index.zh-CN.md @@ -27,3 +27,4 @@ subtitle: 按钮 | `[nzShape]` | 设置按钮形状,可选值为 `circle` 或者不设 | string | - | | `[nzSize]` | 设置按钮大小,可选值为 `small` `large` 或者不设 | string | default | | `[nzType]` | 设置按钮类型,可选值为 `primary` `dashed` `danger` 或者不设 | string | - | +| `[nzBlock]` | 将按钮宽度调整为其父宽度的选项 | boolean | false | diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts index eddbf89185e..ad283a60c66 100644 --- a/components/button/nz-button.component.ts +++ b/components/button/nz-button.component.ts @@ -31,6 +31,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { private _shape: NzButtonShape; private _size: NzButtonSize; private _loading = false; + private _block = false; private el: HTMLElement; private iconElement: HTMLElement; private iconOnly = false; @@ -38,6 +39,16 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { private sizeMap = { large: 'lg', small: 'sm' }; @ViewChild('contentElement') contentElement: ElementRef; + @Input() + set nzBlock(value: boolean) { + this._block = toBoolean(value); + this.setClassMap(); + } + + get nzBlock(): boolean { + return this._block; + } + @Input() set nzGhost(value: boolean) { this._ghost = toBoolean(value); @@ -116,7 +127,8 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { [ `${this.prefixCls}-loading` ] : this.nzLoading, [ `${this.prefixCls}-icon-only` ] : this.iconOnly, [ `${this.prefixCls}-background-ghost` ] : this.nzGhost, - [ `ant-input-search-button` ] : this.nzSearch + [ `ant-input-search-button` ] : this.nzSearch, + [ `ant-btn-block` ] : this.nzBlock }; this.nzUpdateHostClassService.updateHostClass(this.el, classMap); } diff --git a/components/button/nz-button.spec.ts b/components/button/nz-button.spec.ts index d6a04ab8ac2..5b422291b6b 100644 --- a/components/button/nz-button.spec.ts +++ b/components/button/nz-button.spec.ts @@ -3,6 +3,7 @@ import { async, fakeAsync, tick, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NzDemoButtonBasicComponent } from './demo/basic'; +import { NzDemoButtonBlockComponent } from './demo/block'; import { NzDemoButtonButtonGroupComponent } from './demo/button-group'; import { NzDemoButtonDisabledComponent } from './demo/disabled'; import { NzDemoButtonGhostComponent } from './demo/ghost'; @@ -246,6 +247,36 @@ describe('button', () => { expect(button.nativeElement.classList.contains('ant-input-search-button')).toBe(true); }); }); + describe('block', () => { + let buttons; + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports : [ NzButtonModule ], + declarations: [ NzDemoButtonBlockComponent ], + providers : [] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NzDemoButtonBlockComponent); + testComponent = fixture.debugElement.componentInstance; + buttons = fixture.debugElement.queryAll(By.directive(NzButtonComponent)); + }); + + it('should have correct style', () => { + fixture.detectChanges(); + expect(buttons[ 0 ].nativeElement.classList.contains('ant-btn-primary')).toBe(true); + expect(buttons[ 1 ].nativeElement.classList.contains('ant-btn-default')).toBe(true); + expect(buttons[ 2 ].nativeElement.classList.contains('ant-btn-dashed')).toBe(true); + expect(buttons[ 3 ].nativeElement.classList.contains('ant-btn-danger')).toBe(true); + + expect(buttons[ 0 ].nativeElement.classList.contains('ant-btn-block')).toBe(true); + expect(buttons[ 1 ].nativeElement.classList.contains('ant-btn-block')).toBe(true); + expect(buttons[ 2 ].nativeElement.classList.contains('ant-btn-block')).toBe(true); + expect(buttons[ 3 ].nativeElement.classList.contains('ant-btn-block')).toBe(true); + }); + }); + }); @Component({