feat(module:space): support nzAlign (#5299)

NG-ZORRO · Sep 14, 2020 · 2febb92 · 2febb92
1 parent aa984f7
commit 2febb92
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 6 deletions.
diff --git a/components/space/demo/align.md b/components/space/demo/align.md
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 对齐
+  en-US: Align
+---
+
+## zh-CN
+
+设置对齐模式。
+
+## en-US
+
+Config item align.
diff --git a/components/space/demo/align.ts b/components/space/demo/align.ts
@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-space-align',
+  template: `
+    <div class="space-align-container">
+      <div nz-space nzAlign="center" class="space-align-block">
+        <nz-space-item>center</nz-space-item>
+        <nz-space-item>
+          <button nz-button nzType="primary">Button</button>
+        </nz-space-item>
+        <span nz-space-item class="mock-block">Block</span>
+      </div>
+      <div nz-space nzAlign="start" class="space-align-block">
+        <nz-space-item>start</nz-space-item>
+        <nz-space-item>
+          <button nz-button nzType="primary">Button</button>
+        </nz-space-item>
+        <span nz-space-item class="mock-block">Block</span>
+      </div>
+      <div nz-space nzAlign="end" class="space-align-block">
+        <nz-space-item>end</nz-space-item>
+        <nz-space-item>
+          <button nz-button nzType="primary">Button</button>
+        </nz-space-item>
+        <span nz-space-item class="mock-block">Block</span>
+      </div>
+      <div nz-space nzAlign="baseline" class="space-align-block">
+        <nz-space-item>baseline</nz-space-item>
+        <nz-space-item>
+          <button nz-button nzType="primary">Button</button>
+        </nz-space-item>
+        <span nz-space-item class="mock-block">Block</span>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .space-align-container {
+        display: flex;
+        align-item: flex-start;
+        flex-wrap: wrap;
+      }
+      .space-align-block {
+        margin: 8px 4px;
+        border: 1px solid #40a9ff;
+        padding: 4px;
+        flex: none;
+      }
+      .space-align-block .mock-block {
+        display: inline-block;
+        padding: 32px 8px 16px;
+        background: rgba(150, 150, 150, 0.2);
+      }
+    `
+  ]
+})
+export class NzDemoSpaceAlignComponent {}
diff --git a/components/space/doc/index.en-US.md b/components/space/doc/index.en-US.md
@@ -24,4 +24,5 @@ import { NzSpaceModule } from 'ng-zorro-antd/space';
 | Property | Description | Type | Default | Global Config |
 | --- | --- | --- | --- | --- |
 | `[nzSize]` | space size | `small` \| `middle` \| `large` \| `number` | `small` | ✅ |
-| `[nzDirection]` | space direction | `vertical` \| `horizontal` | `horizontal` |  |
+| `[nzDirection]` | space direction | `vertical` \| `horizontal` | `horizontal` |  |
+| `[nzAlign]` | align items | `start` \| `end` \| `baseline` \| `horizontal` | - | |
diff --git a/components/space/doc/index.zh-CN.md b/components/space/doc/index.zh-CN.md
@@ -24,4 +24,5 @@ import { NzSpaceModule } from 'ng-zorro-antd/space';
 | 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
 | --------- | -------- | ------------------------------------------ | ------------ | -- |
 | `[nzSize]`      | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small`  | ✅ |
-| `[nzDirection]` | 间距方向 | `vertical` \| `horizontal` | `horizontal` | |
+| `[nzDirection]` | 间距方向 | `vertical` \| `horizontal` | `horizontal` | |
+| `[nzAlign]` | 对齐方式 | `start` \| `end` \| `baseline` \| `horizontal` | - | |
diff --git a/components/space/public-api.ts b/components/space/public-api.ts
@@ -6,3 +6,4 @@
 export * from './space.module';
 export * from './space.component';
 export * from './space-item.component';
+export * from './types';
diff --git a/components/space/space.component.spec.ts b/components/space/space.component.spec.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NzSpaceAlign } from 'ng-zorro-antd/space';
 import { NzSpaceComponent } from 'ng-zorro-antd/space/space.component';
 
 import { NzSpaceItemComponent } from './space-item.component';
@@ -115,11 +116,33 @@ describe('Space', () => {
       expect(element.style.marginBottom).toBeFalsy();
     });
   });
+  it('should set align', () => {
+    component.direction = 'vertical';
+    fixture.detectChanges();
+
+    const spaceComponent = fixture.debugElement.query(By.directive(NzSpaceComponent));
+    const spaceNativeElement = spaceComponent.nativeElement as HTMLElement;
+    expect(spaceNativeElement.classList).toContain('ant-space-vertical');
+
+    spaceNativeElement.classList.forEach(className => {
+      expect(className.indexOf('ant-space-align') === -1).toBe(true);
+    });
+
+    component.direction = 'horizontal';
+    fixture.detectChanges();
+
+    expect(spaceNativeElement.classList).toContain('ant-space-align-center');
+
+    component.align = 'end';
+    fixture.detectChanges();
+
+    expect(spaceNativeElement.classList).toContain('ant-space-align-end');
+  });
 });
 
 @Component({
   template: `
-    <nz-space [nzSize]="size" [nzDirection]="direction">
+    <nz-space [nzSize]="size" [nzDirection]="direction" [nzAlign]="align">
       <nz-space-item>
         <div>item</div>
       </nz-space-item>
@@ -136,4 +159,5 @@ class SpaceTestComponent {
   size: string | number = 'small';
   direction = 'horizontal';
   show = false;
+  align?: NzSpaceAlign;
 }
diff --git a/components/space/space.component.ts b/components/space/space.component.ts
@@ -10,12 +10,12 @@ import { Subject } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 
 import { NzSpaceItemComponent } from './space-item.component';
-import { NzSpaceDirection, NzSpaceSize } from './types';
+import { NzSpaceAlign, NzSpaceDirection, NzSpaceSize } from './types';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'space';
 
 @Component({
-  selector: 'nz-space',
+  selector: 'nz-space, [nz-space]',
   exportAs: 'NzSpace',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
@@ -24,17 +24,23 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'space';
   host: {
     class: 'ant-space',
     '[class.ant-space-horizontal]': 'nzDirection === "horizontal"',
-    '[class.ant-space-vertical]': 'nzDirection === "vertical"'
+    '[class.ant-space-vertical]': 'nzDirection === "vertical"',
+    '[class.ant-space-align-start]': 'mergedAlign === "start"',
+    '[class.ant-space-align-end]': 'mergedAlign === "end"',
+    '[class.ant-space-align-center]': 'mergedAlign === "center"',
+    '[class.ant-space-align-baseline]': 'mergedAlign === "baseline"'
   }
 })
 export class NzSpaceComponent implements OnChanges, OnDestroy, AfterViewInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
 
   @Input() nzDirection: NzSpaceDirection = 'horizontal';
+  @Input() nzAlign?: NzSpaceAlign;
   @Input() @WithConfig() nzSize: number | NzSpaceSize = 'small';
 
   @ContentChildren(NzSpaceItemComponent) nzSpaceItemComponents!: QueryList<NzSpaceItemComponent>;
 
+  mergedAlign?: NzSpaceAlign;
   private destroy$ = new Subject();
 
   constructor(public nzConfigService: NzConfigService) {}
@@ -49,6 +55,7 @@ export class NzSpaceComponent implements OnChanges, OnDestroy, AfterViewInit {
 
   ngOnChanges(): void {
     this.updateSpaceItems();
+    this.mergedAlign = this.nzAlign === undefined && this.nzDirection === 'horizontal' ? 'center' : this.nzAlign;
   }
 
   ngOnDestroy(): void {

diff --git a/components/space/types.ts b/components/space/types.ts
@@ -4,4 +4,5 @@
  */
 
 export type NzSpaceDirection = 'vertical' | 'horizontal';
+export type NzSpaceAlign = 'start' | 'end' | 'center' | 'baseline';
 export type NzSpaceSize = 'small' | 'middle' | 'large';