feat(module:card): support setting size (#3429)

fix(module:card): fix missing class
NG-ZORRO · May 17, 2019 · 2015021 · 2015021
1 parent c63849f
commit 2015021
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/components/card/doc/index.en-US.md b/components/card/doc/index.en-US.md
@@ -38,6 +38,7 @@ import { NzCardModule } from 'ng-zorro-antd';
 | `[nzLoading]` | Shows a loading indicator while the contents of the card are being fetched | `boolean` | `false` |
 | `[nzTitle]` | Card title | `string｜TemplateRef<void>` | - |
 | `[nzType]` | Card style type, can be set to `inner` or not set | `'inner'` | - |
+| `[nzSize]` | Size of card | `'default'｜'small'` | `'default'` |
 
 
 ### nz-card-meta

diff --git a/components/card/doc/index.zh-CN.md b/components/card/doc/index.zh-CN.md
@@ -39,6 +39,7 @@ import { NzCardModule } from 'ng-zorro-antd';
 | `[nzLoading]` | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | `boolean` | `false` |
 | `[nzTitle]` | 卡片标题 | `string｜TemplateRef<void>` | - |
 | `[nzType]` | 卡片类型，可设置为 `inner` 或 不设置 | `'inner'` | - |
+| `[nzSize]` | 卡片的尺寸 | `'default'｜'small'` | `'default'` |
 
 ### nz-card-meta
 

diff --git a/components/card/nz-card.component.ts b/components/card/nz-card.component.ts
@@ -10,13 +10,16 @@ import {
   ChangeDetectionStrategy,
   Component,
   ContentChild,
+  ContentChildren,
   ElementRef,
   Input,
+  QueryList,
   Renderer2,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 import { InputBoolean } from 'ng-zorro-antd/core';
+import { NzCardGridDirective } from './nz-card-grid.directive';
 import { NzCardTabComponent } from './nz-card-tab.component';
 
 @Component({
@@ -37,7 +40,9 @@ import { NzCardTabComponent } from './nz-card-tab.component';
     '[class.ant-card-loading]': 'nzLoading',
     '[class.ant-card-bordered]': 'nzBordered',
     '[class.ant-card-hoverable]': 'nzHoverable',
-    '[class.ant-card-type-inner]': `nzType === 'inner'`,
+    '[class.ant-card-small]': 'nzSize === "small"',
+    '[class.ant-card-contain-grid]': 'grids && grids.length',
+    '[class.ant-card-type-inner]': 'nzType === "inner"',
     '[class.ant-card-contain-tabs]': '!!tab'
   }
 })
@@ -49,9 +54,11 @@ export class NzCardComponent {
   @Input() nzCover: TemplateRef<void>;
   @Input() nzActions: Array<TemplateRef<void>> = [];
   @Input() nzType: string;
+  @Input() nzSize: 'default' | 'small' = 'default';
   @Input() nzTitle: string | TemplateRef<void>;
   @Input() nzExtra: string | TemplateRef<void>;
   @ContentChild(NzCardTabComponent) tab: NzCardTabComponent;
+  @ContentChildren(NzCardGridDirective) grids: QueryList<NzCardGridDirective>;
 
   constructor(renderer: Renderer2, elementRef: ElementRef) {
     renderer.addClass(elementRef.nativeElement, 'ant-card');

diff --git a/components/card/nz-card.spec.ts b/components/card/nz-card.spec.ts
@@ -1,4 +1,4 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -31,7 +31,8 @@ describe('card', () => {
         NzDemoCardLoadingComponent,
         NzDemoCardMetaComponent,
         NzDemoCardSimpleComponent,
-        NzDemoCardTabsComponent
+        NzDemoCardTabsComponent,
+        TestCardSizeComponent
       ]
     });
     TestBed.compileComponents();
@@ -84,6 +85,7 @@ describe('card', () => {
     const fixture = TestBed.createComponent(NzDemoCardGridCardComponent);
     const card = fixture.debugElement.query(By.directive(NzCardComponent));
     fixture.detectChanges();
+    expect(card.nativeElement.classList).toContain('ant-card-contain-grid');
     expect(card.nativeElement.querySelector('.ant-card-body').firstElementChild!.classList).toContain('ant-card-grid');
   });
   it('should inner work', () => {
@@ -108,4 +110,26 @@ describe('card', () => {
     fixture.detectChanges();
     expect(card.nativeElement.querySelector('.ant-card-actions').children.length).toBe(3);
   });
+  it('should size work', () => {
+    const fixture = TestBed.createComponent(TestCardSizeComponent);
+    const card = fixture.debugElement.query(By.directive(NzCardComponent));
+    fixture.detectChanges();
+    expect(card.nativeElement.classList).not.toContain('ant-card-small');
+    fixture.componentInstance.size = 'small';
+    fixture.detectChanges();
+    expect(card.nativeElement.classList).toContain('ant-card-small');
+  });
 });
+
+@Component({
+  template: `
+    <nz-card [nzSize]="size">
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
+    </nz-card>
+  `
+})
+class TestCardSizeComponent {
+  size = 'default';
+}