From 018fdebc6d954b7fcea8502e6a70f49c8a69701f Mon Sep 17 00:00:00 2001
From: simplejason <simplejason.coder@gmail.com>
Date: Wed, 18 May 2022 17:36:59 +0800
Subject: [PATCH] chore: fix some demos

---
 components/grid/demo/flex.md              |  4 ++--
 components/grid/demo/flex.ts              |  7 +++++++
 components/grid/row.directive.ts          |  3 ++-
 components/page-header/demo/actions.ts    | 16 ++++++++++------
 components/page-header/demo/content.ts    | 22 ++++++++++++++++------
 components/page-header/demo/ghost.ts      |  8 +++++---
 components/page-header/demo/module        |  4 +++-
 components/page-header/demo/responsive.ts |  8 +++++---
 8 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
index 55831492f95..0a6a8a36df2 100755
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@@ -9,9 +9,9 @@ title:
 
 布局基础。
 
-子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
+子元素根据不同的值 `start`、`center`、`end`、`space-between`、`space-around` 和 `space-evenly`，分别定义其在父节点里面的排版方式。
 
 ## en-US
 
-Child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode.
+Child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, `space-evenly`, which are defined in its parent node layout mode.
 
diff --git a/components/grid/demo/flex.ts b/components/grid/demo/flex.ts
index 7ebe910a1ab..58aa1a620aa 100755
--- a/components/grid/demo/flex.ts
+++ b/components/grid/demo/flex.ts
@@ -39,6 +39,13 @@ import { Component } from '@angular/core';
         <div nz-col nzSpan="4">col-4</div>
         <div nz-col nzSpan="4">col-4</div>
       </div>
+      <p>sub-element align evenly</p>
+      <div nz-row nzJustify="space-evenly">
+        <div nz-col nzSpan="4">col-4</div>
+        <div nz-col nzSpan="4">col-4</div>
+        <div nz-col nzSpan="4">col-4</div>
+        <div nz-col nzSpan="4">col-4</div>
+      </div>
     </div>
   `,
   styles: [
diff --git a/components/grid/row.directive.ts b/components/grid/row.directive.ts
index 4bd1b429c03..0c8c231b37b 100644
--- a/components/grid/row.directive.ts
+++ b/components/grid/row.directive.ts
@@ -25,7 +25,7 @@ import { takeUntil } from 'rxjs/operators';
 import { gridResponsiveMap, NzBreakpointKey, NzBreakpointService } from 'ng-zorro-antd/core/services';
 import { IndexableObject } from 'ng-zorro-antd/core/types';
 
-export type NzJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+export type NzJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
 export type NzAlign = 'top' | 'middle' | 'bottom';
 
 @Directive({
@@ -41,6 +41,7 @@ export type NzAlign = 'top' | 'middle' | 'bottom';
     '[class.ant-row-center]': `nzJustify === 'center'`,
     '[class.ant-row-space-around]': `nzJustify === 'space-around'`,
     '[class.ant-row-space-between]': `nzJustify === 'space-between'`,
+    '[class.ant-row-space-evenly]': `nzJustify === 'space-evenly'`,
     '[class.ant-row-rtl]': `dir === "rtl"`
   }
 })
diff --git a/components/page-header/demo/actions.ts b/components/page-header/demo/actions.ts
index e6035ad5d85..1cdf5ed0856 100644
--- a/components/page-header/demo/actions.ts
+++ b/components/page-header/demo/actions.ts
@@ -7,9 +7,11 @@ import { Component } from '@angular/core';
       <nz-page-header-title>Title</nz-page-header-title>
       <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
       <nz-page-header-extra>
-        <button nz-button>Operation</button>
-        <button nz-button>Operation</button>
-        <button nz-button nzType="primary">Primary</button>
+        <nz-space>
+          <button *nzSpaceItem nz-button>Operation</button>
+          <button *nzSpaceItem nz-button>Operation</button>
+          <button *nzSpaceItem nz-button nzType="primary">Primary</button>
+        </nz-space>
       </nz-page-header-extra>
       <nz-page-header-content>
         <nz-descriptions nzSize="small" [nzColumn]="3">
@@ -31,9 +33,11 @@ import { Component } from '@angular/core';
         <nz-tag nzColor="blue">Runing</nz-tag>
       </nz-page-header-tags>
       <nz-page-header-extra>
-        <button nz-button>Operation</button>
-        <button nz-button>Operation</button>
-        <button nz-button nzType="primary">Primary</button>
+        <nz-space>
+          <button *nzSpaceItem nz-button>Operation</button>
+          <button *nzSpaceItem nz-button>Operation</button>
+          <button *nzSpaceItem nz-button nzType="primary">Primary</button>
+        </nz-space>
       </nz-page-header-extra>
       <nz-page-header-content>
         <nz-row nzType="flex">
diff --git a/components/page-header/demo/content.ts b/components/page-header/demo/content.ts
index f10c7b6cf14..920e5ea801e 100644
--- a/components/page-header/demo/content.ts
+++ b/components/page-header/demo/content.ts
@@ -29,12 +29,22 @@ import { Component } from '@angular/core';
 
       <!--extra-->
       <nz-page-header-extra>
-        <button nz-button>Operation</button>
-        <button nz-button>Operation</button>
-        <button nz-button nzType="primary">Primary</button>
-        <button nz-button nzNoAnimation nz-dropdown [nzDropdownMenu]="menu" style="border: none; padding: 0">
-          <i nz-icon nzType="ellipsis" nzTheme="outline" style="font-size: 20px; vertical-align: top;"></i>
-        </button>
+        <nz-space>
+          <button *nzSpaceItem nz-button>Operation</button>
+          <button *nzSpaceItem nz-button>Operation</button>
+          <button *nzSpaceItem nz-button nzType="primary">Primary</button>
+          <button
+            *nzSpaceItem
+            nz-button
+            nzNoAnimation
+            nz-dropdown
+            [nzDropdownMenu]="menu"
+            nzPlacement="bottomRight"
+            style="border: none; padding: 0"
+          >
+            <i nz-icon nzType="more" nzTheme="outline" style="font-size: 20px; vertical-align: top;"></i>
+          </button>
+        </nz-space>
         <nz-dropdown-menu #menu="nzDropdownMenu">
           <ul nz-menu>
             <li nz-menu-item>1st menu item length</li>
diff --git a/components/page-header/demo/ghost.ts b/components/page-header/demo/ghost.ts
index e679079bf37..31d49e4c924 100644
--- a/components/page-header/demo/ghost.ts
+++ b/components/page-header/demo/ghost.ts
@@ -8,9 +8,11 @@ import { Component } from '@angular/core';
         <nz-page-header-title>Title</nz-page-header-title>
         <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
         <nz-page-header-extra>
-          <button nz-button>Operation</button>
-          <button nz-button>Operation</button>
-          <button nz-button nzType="primary">Primary</button>
+          <nz-space>
+            <button *nzSpaceItem nz-button>Operation</button>
+            <button *nzSpaceItem nz-button>Operation</button>
+            <button *nzSpaceItem nz-button nzType="primary">Primary</button>
+          </nz-space>
         </nz-page-header-extra>
         <nz-page-header-content>
           <nz-descriptions nzSize="small" [nzColumn]="3">
diff --git a/components/page-header/demo/module b/components/page-header/demo/module
index e1bb3f1ac3d..5c27a397f95 100644
--- a/components/page-header/demo/module
+++ b/components/page-header/demo/module
@@ -10,6 +10,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzStatisticModule } from 'ng-zorro-antd/statistic';
 import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 export const moduleList = [
   NzPageHeaderModule,
@@ -23,5 +24,6 @@ export const moduleList = [
   NzDropDownModule,
   NzIconModule,
   NzStatisticModule,
-  NzGridModule
+  NzGridModule,
+  NzSpaceModule
 ];
diff --git a/components/page-header/demo/responsive.ts b/components/page-header/demo/responsive.ts
index fd0d551bd3c..0f258db9beb 100644
--- a/components/page-header/demo/responsive.ts
+++ b/components/page-header/demo/responsive.ts
@@ -7,9 +7,11 @@ import { Component } from '@angular/core';
       <nz-page-header-title>Title</nz-page-header-title>
       <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
       <nz-page-header-extra>
-        <button nz-button>Operation</button>
-        <button nz-button>Operation</button>
-        <button nz-button nzType="primary">Primary</button>
+        <nz-space>
+          <button *nzSpaceItem nz-button>Operation</button>
+          <button *nzSpaceItem nz-button>Operation</button>
+          <button *nzSpaceItem nz-button nzType="primary">Primary</button>
+        </nz-space>
       </nz-page-header-extra>
       <nz-page-header-content>
         <div class="content">