feat(module:button): support block style (#2051)

close #2047

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.

components/button/demo/block.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-button-block',
+  template: `
+    <button nz-button nzType="primary" nzBlock>Primary</button>
+    <button nz-button nzType="default" nzBlock>Default</button>
+    <button nz-button nzType="dashed" nzBlock>Dashed</button>
+    <button nz-button nzType="danger" nzBlock>Danger</button>`,
+  styles  : [
+      `
+      [nz-button] {
+        margin-bottom: 12px;
+      }
+    `
+  ]
+})
+export class NzDemoButtonBlockComponent {
+}

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 |

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 |

components/button/nz-button.component.ts

@@ -31,13 +31,24 @@ 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;
   private prefixCls = 'ant-btn';
   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);
   }

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({