diff --git a/src/components/grid/nz-col.component.ts b/src/components/grid/nz-col.component.ts index 002888a5662..43432e2987a 100644 --- a/src/components/grid/nz-col.component.ts +++ b/src/components/grid/nz-col.component.ts @@ -12,12 +12,20 @@ import { } from '@angular/core'; import { NzRowComponent } from './nz-row.component'; +export abstract class EmbeddedProperty { + span: number; + pull: number; + push: number; + offset: number; + order: number +} + @Component({ - selector : 'nz-col', - template : ` + selector: 'nz-col', + template: ` `, - styles : [] + styles : [] }) export class NzColComponent implements OnInit, OnChanges { @@ -40,11 +48,11 @@ export class NzColComponent implements OnInit, OnChanges { @Input() nzOffset: number; @Input() nzPush: number; @Input() nzPull: number; - @Input() nzXs: number; - @Input() nzSm: number; - @Input() nzMd: number; - @Input() nzLg: number; - @Input() nzXl: number; + @Input() nzXs: number | EmbeddedProperty; + @Input() nzSm: number | EmbeddedProperty; + @Input() nzMd: number | EmbeddedProperty; + @Input() nzLg: number | EmbeddedProperty; + @Input() nzXl: number | EmbeddedProperty; /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/ setClassMap(): void { @@ -57,12 +65,9 @@ export class NzColComponent implements OnInit, OnChanges { this.nzOffset && `${this._prefixCls}-offset-${this.nzOffset}`, this.nzPull && `${this._prefixCls}-pull-${this.nzPull}`, this.nzPush && `${this._prefixCls}-push-${this.nzPush}`, - this.nzXs && `${this._prefixCls}-xs-${this.nzXs}`, - this.nzSm && `${this._prefixCls}-sm-${this.nzSm}`, - this.nzMd && `${this._prefixCls}-md-${this.nzMd}`, - this.nzLg && `${this._prefixCls}-lg-${this.nzLg}`, - this.nzXl && `${this._prefixCls}-xl-${this.nzXl}`, - ].filter((item) => { + ...this.generateClass() + ]; + this._classList = this._classList.filter((item) => { return !!item; }); this._classList.forEach(_className => { @@ -70,6 +75,24 @@ export class NzColComponent implements OnInit, OnChanges { }) } + generateClass() { + const listOfSizeInputName = [ 'nzXs', 'nzSm', 'nzMd', 'nzLg', 'nzXl' ]; + const listOfClassName = []; + listOfSizeInputName.forEach(name => { + const sizeName = name.replace('nz', '').toLowerCase(); + if ((typeof(this[ name ]) === 'number') || (typeof (this[ name ]) === 'string')) { + listOfClassName.push(this[ name ] && `${this._prefixCls}-${sizeName}-${this[ name ]}`); + } else { + listOfClassName.push(this[ name ] && this[ name ][ 'span' ] && `${this._prefixCls}-${sizeName}-${this[ name ][ 'span' ]}`); + listOfClassName.push(this[ name ] && this[ name ][ 'pull' ] && `${this._prefixCls}-${sizeName}-pull-${this[ name ][ 'pull' ]}`); + listOfClassName.push(this[ name ] && this[ name ][ 'push' ] && `${this._prefixCls}-${sizeName}-push-${this[ name ][ 'push' ]}`); + listOfClassName.push(this[ name ] && this[ name ][ 'offset' ] && `${this._prefixCls}-${sizeName}-offset-${this[ name ][ 'offset' ]}`); + listOfClassName.push(this[ name ] && this[ name ][ 'order' ] && `${this._prefixCls}-${sizeName}-order-${this[ name ][ 'order' ]}`); + } + }); + return listOfClassName; + } + ngOnChanges(changes: { [propertyName: string]: SimpleChange }) { this.setClassMap(); } diff --git a/src/components/grid/nz-grid.component.spec.ts b/src/components/grid/nz-grid.component.spec.ts index 6604a41854c..cc5a01c8d69 100644 --- a/src/components/grid/nz-grid.component.spec.ts +++ b/src/components/grid/nz-grid.component.spec.ts @@ -1,17 +1,17 @@ /* tslint:disable:no-unused-variable */ -import {async, ComponentFixture, TestBed, ComponentFixtureAutoDetect} from '@angular/core/testing'; -import {Component, DebugElement} from '@angular/core'; -import {By} from '@angular/platform-browser'; -import {NzGridModule} from './nz-grid.module'; -import {NzRowComponent} from './nz-row.component'; -import {NzColDirective} from './nz-col.directive'; +import { async, ComponentFixture, TestBed, ComponentFixtureAutoDetect } from '@angular/core/testing'; +import { Component, DebugElement } from '@angular/core'; +import { By } from '@angular/platform-browser'; +import { NzGridModule } from './nz-grid.module'; +import { NzRowComponent } from './nz-row.component'; +import { NzColDirective } from './nz-col.directive'; describe('NzGrid', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [NzGridModule], - declarations: [GridListWithoutCols, GridListWithoutRows, TestSpan, TestOffset, TestPushPull, TestColResponsive, TestGutter, TestTypeFlex, TestTypeFlexOrder] + imports : [ NzGridModule ], + declarations: [ GridListWithoutCols, GridListWithoutRows, TestSpan, TestOffset, TestPushPull, TestColResponsive, TestGutter, TestTypeFlex, TestTypeFlexOrder, TestTypeEmbedded ] }).compileComponents(); })); describe('for cols', () => { @@ -145,7 +145,7 @@ describe('NzGrid', () => { const debugElement_col = fixture.debugElement.query(By.directive(NzColDirective)); // window.resizeTo(800, 600); - testComponent._col1 = {xs: 2, xm: 4, md: 6, lg: 8, xl: 10}; + testComponent._col1 = { xs: 2, xm: 4, md: 6, lg: 8, xl: 10 }; fixture.detectChanges(); expect(debugElement_col.nativeElement.classList.contains('ant-col-xs-2')).toBe(true); expect(debugElement_col.nativeElement.classList.contains('ant-col-sm-4')).toBe(true); @@ -153,7 +153,7 @@ describe('NzGrid', () => { expect(debugElement_col.nativeElement.classList.contains('ant-col-lg-8')).toBe(true); expect(debugElement_col.nativeElement.classList.contains('ant-col-xl-10')).toBe(true); - testComponent._col1 = {xs: 'custom_string', xm: 4, md: 6, lg: 8, xl: 10}; + testComponent._col1 = { xs: 'custom_string', xm: 4, md: 6, lg: 8, xl: 10 }; expect(() => { fixture.detectChanges() }).not.toThrow(); @@ -191,10 +191,18 @@ describe('NzGrid', () => { const testComponentResponsive = fixtureResponsive.debugElement.componentInstance; const debugElement_col_responsive = fixtureResponsive.debugElement.query(By.directive(NzColDirective)); debugElement_col_responsive.nativeElement.classList.add('custom-class'); - testComponentResponsive._col1 = {xs: 2, xm: 4, md: 6, lg: 8, xl: 10}; + testComponentResponsive._col1 = { xs: 2, xm: 4, md: 6, lg: 8, xl: 10 }; fixtureResponsive.detectChanges(); expect(debugElement_col_responsive.nativeElement.classList.contains('custom-class')).toBe(true); }); + it('should embedded style work', () => { + const fixtureSpan = TestBed.createComponent(TestTypeEmbedded); + const debugElement_embedded_span = fixtureSpan.debugElement.query(By.directive(NzColDirective)); + fixtureSpan.detectChanges(); + const className = 'ant-col-xs-1 ant-col-xs-pull-1 ant-col-xs-push-1 ant-col-xs-offset-1 ant-col-xs-order-1 ant-col-sm-1 ant-col-sm-pull-1 ant-col-sm-push-1 ant-col-sm-offset-1 ant-col-sm-order-1 ant-col-md-1 ant-col-md-pull-1 ant-col-md-push-1 ant-col-md-offset-1 ant-col-md-order-1 ant-col-lg-1 ant-col-lg-pull-1 ant-col-lg-push-1 ant-col-lg-offset-1 ant-col-lg-order-1 ant-col-xl-1 ant-col-xl-pull-1 ant-col-xl-push-1 ant-col-xl-offset-1 ant-col-xl-order-1'; + expect(debugElement_embedded_span.nativeElement.className === className).toBe(true); + + }); }); describe('for rows', () => { @@ -311,13 +319,16 @@ describe('NzGrid', () => { function getStyle(el: DebugElement, prop: string): string { return getComputedStyle(el.nativeElement).getPropertyValue(prop); } + /** Test component that contains an nzGrid. */ -@Component({template: '
'}) +@Component({ template: '
' }) class GridListWithoutCols { } -@Component({template: '
'}) + +@Component({ template: '
' }) class GridListWithoutRows { } + @Component({ selector: 'test-span', template: ` @@ -334,6 +345,7 @@ class GridListWithoutRows { class TestSpan { _span = 5; } + @Component({ selector: 'test-offset', template: ` @@ -353,6 +365,7 @@ class TestOffset { _span2 = 12; _offset2 = 8; } + @Component({ selector: 'test-push-pull', template: ` @@ -368,6 +381,7 @@ class TestPushPull { _push = 6; _pull = 18; } + @Component({ selector: 'test-col-responsive', template: ` @@ -378,7 +392,7 @@ class TestPushPull { `, }) class TestColResponsive { - _col1 = {xs: 2, xm: 4, md: 6, lg: 8, xl: 10}; + _col1 = { xs: 2, xm: 4, md: 6, lg: 8, xl: 10 }; } @Component({ @@ -400,6 +414,7 @@ class TestGutter { _span = 6; _gutter = 16; } + @Component({ selector: 'test-type-flex', template: ` @@ -421,6 +436,7 @@ class TestTypeFlex { _justify = 'start'; _align = 'top' } + @Component({ selector: 'test-type-flex', template: ` @@ -439,3 +455,20 @@ class TestTypeFlexOrder { _order1 = 1; _order2 = 2 } + +@Component({ + selector: 'test-type-embedded', + template: ` +
+
+
+ ` +}) +class TestTypeEmbedded { +} diff --git a/src/showcase/nz-demo-grid/nz-demo-grid-responsive-more.component.ts b/src/showcase/nz-demo-grid/nz-demo-grid-responsive-more.component.ts new file mode 100644 index 00000000000..aff3901538f --- /dev/null +++ b/src/showcase/nz-demo-grid/nz-demo-grid-responsive-more.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-demo-grid-responsive-more', + template: ` +
+
+ Col +
+
+ Col +
+
+ Col +
+
`, + styles : [] +}) +export class NzDemoGridResponsiveMoreComponent implements OnInit { + constructor() { + } + + ngOnInit() { + } +} + diff --git a/src/showcase/nz-demo-grid/nz-demo-grid.component.ts b/src/showcase/nz-demo-grid/nz-demo-grid.component.ts index ffd9a282d5e..a92eacf7cdc 100644 --- a/src/showcase/nz-demo-grid/nz-demo-grid.component.ts +++ b/src/showcase/nz-demo-grid/nz-demo-grid.component.ts @@ -18,6 +18,7 @@ export class NzDemoGridComponent implements OnInit { NzDemoGridFlexAlignCode = require('!!raw-loader!./nz-demo-grid-flex-align.component'); NzDemoGridFlexOrderCode = require('!!raw-loader!./nz-demo-grid-flex-order.component'); NzDemoGridResponsiveCode = require('!!raw-loader!./nz-demo-grid-responsive.component'); + NzDemoGridResponsiveMoreCode = require('!!raw-loader!./nz-demo-grid-responsive-more.component'); constructor() { } diff --git a/src/showcase/nz-demo-grid/nz-demo-grid.html b/src/showcase/nz-demo-grid/nz-demo-grid.html index c4258cf7721..fcf99884d3f 100644 --- a/src/showcase/nz-demo-grid/nz-demo-grid.html +++ b/src/showcase/nz-demo-grid/nz-demo-grid.html @@ -138,6 +138,17 @@

Flex 布局

+ + +
+

+ span pull push offset order 属性可以通过内嵌到 nzXs nzSm nzMd nzLg nzXl 属性中来使用。 +

+

+ 其中 [nzXs]="6" 相当于 nzXs={{'{'}}{{'{'}} span: 6 {{'}'}}{{'}'}} +

+
+
@@ -237,31 +248,31 @@

[nz-col] nzXs <768px 响应式栅格，可为栅格数或一个包含其他属性的对象 - Number + Number|Object - nzSm ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 - Number + Number|Object - nzMd ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 - Number + Number|Object - nzLg ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 - Number + Number|Object - nzXl ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 - Number + Number|Object - diff --git a/src/showcase/nz-demo-grid/nz-demo-grid.module.ts b/src/showcase/nz-demo-grid/nz-demo-grid.module.ts index bc6937131ec..dec3db80f6d 100644 --- a/src/showcase/nz-demo-grid/nz-demo-grid.module.ts +++ b/src/showcase/nz-demo-grid/nz-demo-grid.module.ts @@ -11,6 +11,7 @@ import { NzDemoGridFlexComponent } from './nz-demo-grid-flex.component'; import { NzDemoGridFlexAlignComponent } from './nz-demo-grid-flex-align.component'; import { NzDemoGridFlexOrderComponent } from './nz-demo-grid-flex-order.component'; import { NzDemoGridResponsiveComponent } from './nz-demo-grid-responsive.component'; +import { NzDemoGridResponsiveMoreComponent } from './nz-demo-grid-responsive-more.component'; import { NzDemoGridComponent } from './nz-demo-grid.component'; import { NzCodeBoxModule } from '../share/nz-codebox/nz-codebox.module'; @@ -20,7 +21,7 @@ import { NzDemoGridRoutingModule } from './nz-demo-grid.routing.module'; @NgModule({ imports : [ NzDemoGridRoutingModule, CommonModule, NzCodeBoxModule, NgZorroAntdModule, FormsModule ], - declarations: [ NzDemoGridGutterConfigComponent, NzDemoGridFlexOrderComponent, NzDemoGridBasicComponent, NzDemoGridGutterComponent, NzDemoGridOffsetComponent, NzDemoGridSortComponent, NzDemoGridFlexComponent, NzDemoGridFlexAlignComponent, NzDemoGridResponsiveComponent, NzDemoGridComponent ] + declarations: [ NzDemoGridResponsiveMoreComponent, NzDemoGridGutterConfigComponent, NzDemoGridFlexOrderComponent, NzDemoGridBasicComponent, NzDemoGridGutterComponent, NzDemoGridOffsetComponent, NzDemoGridSortComponent, NzDemoGridFlexComponent, NzDemoGridFlexAlignComponent, NzDemoGridResponsiveComponent, NzDemoGridComponent ] }) export class NzDemoGridModule {