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