chore: fix some demos

NG-ZORRO · Jun 10, 2022 · 018fdeb · 018fdeb
1 parent 32eefd1
commit 018fdeb
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">