feat(module:menu): support nzTitle & nzIcon in nz-submenu

NG-ZORRO · Jun 21, 2019 · 0cde4d7 · 0cde4d7
1 parent 2bfbc89
commit 0cde4d7
Show file tree

Hide file tree

Showing 26 changed files with 256 additions and 206 deletions.
diff --git a/components/alert/doc/index.en-US.md b/components/alert/doc/index.en-US.md
@@ -26,7 +26,7 @@ import { NzAlertModule } from 'ng-zorro-antd';
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[nzBanner]` | Whether to show as banner | `boolean` | `false` |
-| `[nzClosable]` | Whether Alert can be closed | `boolean` | - |
+| `[nzCloseable]` | Whether Alert can be closed | `boolean` | - |
 | `[nzCloseText]` | Close text to show | `string｜TemplateRef<void>` | - |
 | `[nzDescription]` | Additional content of Alert | `string｜TemplateRef<void>` | - |
 | `[nzMessage]` | Content of Alert | `string｜TemplateRef<void>` | - |

diff --git a/components/alert/doc/index.zh-CN.md b/components/alert/doc/index.zh-CN.md
@@ -27,7 +27,7 @@ import { NzAlertModule } from 'ng-zorro-antd';
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzBanner]` | 是否用作顶部公告 | `boolean` | `false` |
-| `[nzClosable]` | 默认不显示关闭按钮 | `boolean` | - |
+| `[nzCloseable]` | 默认不显示关闭按钮 | `boolean` | - |
 | `[nzCloseText]` | 自定义关闭按钮 | `string｜TemplateRef<void>` | - |
 | `[nzDescription]` | 警告提示的辅助性文字介绍 | `string｜TemplateRef<void>` | - |
 | `[nzMessage]` | 警告提示内容 | `string｜TemplateRef<void>` | - |

diff --git a/components/alert/nz-alert.component.html b/components/alert/nz-alert.component.html
@@ -13,7 +13,7 @@
   <ng-container *ngIf="nzShowIcon">
     <i class="ant-alert-icon" [ngClass]="nzIconType" *ngIf="nzIconType; else iconTemplate"></i>
     <ng-template #iconTemplate>
-      <i nz-icon class="ant-alert-icon" [type]="iconType" [theme]="iconTheme"></i>
+      <i nz-icon class="ant-alert-icon" [type]="iconType" [nzTheme]="iconTheme"></i>
     </ng-template>
   </ng-container>
   <span class="ant-alert-message" *ngIf="nzMessage">

diff --git a/components/dropdown/demo/context-menu.ts b/components/dropdown/demo/context-menu.ts
@@ -12,15 +12,13 @@ import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd';
         <li nz-menu-item>1st menu item</li>
         <li nz-menu-item>2nd menu item</li>
         <li nz-menu-item nzDisabled>disabled menu item</li>
-        <li nz-submenu>
-          <span title>sub menu</span>
+        <li nz-submenu nzTitle="sub menu">
           <ul>
             <li nz-menu-item>3rd menu item</li>
             <li nz-menu-item>4th menu item</li>
           </ul>
         </li>
-        <li nz-submenu nzDisabled>
-          <span title>disabled sub menu</span>
+        <li nz-submenu nzDisabled nzTitle="disabled sub menu">
           <ul>
             <li nz-menu-item>3rd menu item</li>
             <li nz-menu-item>4th menu item</li>

diff --git a/components/dropdown/demo/sub-menu.ts b/components/dropdown/demo/sub-menu.ts
@@ -11,15 +11,13 @@ import { Component } from '@angular/core';
       <ul nz-menu>
         <li nz-menu-item>1st menu item</li>
         <li nz-menu-item>2nd menu item</li>
-        <li nz-submenu>
-          <span title>sub menu</span>
+        <li nz-submenu nzTitle="sub menu">
           <ul>
             <li nz-menu-item>3rd menu item</li>
             <li nz-menu-item>4th menu item</li>
           </ul>
         </li>
-        <li nz-submenu nzDisabled>
-          <span title>disabled sub menu</span>
+        <li nz-submenu nzDisabled nzTitle="disabled sub menu">
           <ul>
             <li nz-menu-item>3rd menu item</li>
             <li nz-menu-item>4th menu item</li>

diff --git a/components/dropdown/demo/trigger.ts b/components/dropdown/demo/trigger.ts
@@ -13,15 +13,13 @@ import { Component } from '@angular/core';
         <li nz-menu-item>2nd menu item</li>
         <li nz-menu-divider></li>
         <li nz-menu-item nzDisabled>disabled menu item</li>
-        <li nz-submenu>
-          <span title>sub menu</span>
+        <li nz-submenu nzTitle="sub menu">
           <ul>
             <li nz-menu-item>3rd menu item</li>
             <li nz-menu-item>4th menu item</li>
           </ul>
         </li>
-        <li nz-submenu nzDisabled>
-          <span title>disabled sub menu</span>
+        <li nz-submenu nzDisabled nzTitle="disabled sub menu">
           <ul>
             <li nz-menu-item>3rd menu item</li>
             <li nz-menu-item>4th menu item</li>

diff --git a/components/layout/demo/custom-trigger.ts b/components/layout/demo/custom-trigger.ts
@@ -7,16 +7,14 @@ import { Component } from '@angular/core';
       <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
         <div class="logo"></div>
         <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
-          <li nz-submenu>
-            <span title><i nz-icon nzType="user"></i><span>User</span></span>
+          <li nz-submenu nzTitle="User" nzIcon="user">
             <ul>
               <li nz-menu-item>Tom</li>
               <li nz-menu-item>Bill</li>
               <li nz-menu-item>Alex</li>
             </ul>
           </li>
-          <li nz-submenu>
-            <span title><i nz-icon nzType="team"></i><span>Team</span></span>
+          <li nz-submenu nzTitle="Team" nzIcon="team">
             <ul>
               <li nz-menu-item>Team 1</li>
               <li nz-menu-item>Team 2</li>

diff --git a/components/layout/demo/side.ts b/components/layout/demo/side.ts
@@ -7,23 +7,22 @@ import { Component } from '@angular/core';
       <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" nzWidth="200px">
         <div class="logo"></div>
         <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
-          <li nz-submenu>
-            <span title><i nz-icon nzType="user"></i><span>User</span></span>
+          <li nz-submenu nzTitle="User" nzIcon="user">
             <ul>
               <li nz-menu-item>Tom</li>
               <li nz-menu-item>Bill</li>
               <li nz-menu-item>Alex</li>
             </ul>
           </li>
-          <li nz-submenu>
-            <span title><i nz-icon nzType="team"></i><span>Team</span></span>
+          <li nz-submenu nzTitle="Team" nzIcon="team">
             <ul>
               <li nz-menu-item>Team 1</li>
               <li nz-menu-item>Team 2</li>
             </ul>
           </li>
           <li nz-menu-item>
-            <span><i nz-icon nzType="file"></i><span>File</span></span>
+            <i nz-icon nzType="file"></i>
+            File
           </li>
         </ul>
       </nz-sider>

diff --git a/components/layout/demo/top-side-2.ts b/components/layout/demo/top-side-2.ts
@@ -15,26 +15,23 @@ import { Component } from '@angular/core';
       <nz-layout>
         <nz-sider nzWidth="200px" nzTheme="light">
           <ul nz-menu nzMode="inline" class="sider-menu">
-            <li nz-submenu nzOpen>
-              <span title><i nz-icon nzType="user"></i>subnav 1</span>
+            <li nz-submenu nzOpen nzIcon="user" nzTitle="subnav 1">
               <ul>
                 <li nz-menu-item nzSelected>option1</li>
                 <li nz-menu-item>option2</li>
                 <li nz-menu-item>option3</li>
                 <li nz-menu-item>option4</li>
               </ul>
             </li>
-            <li nz-submenu>
-              <span title><i nz-icon nzType="laptop"></i>subnav 2</span>
+            <li nz-submenu nzTitle="subnav 2" nzIcon="laptop">
               <ul>
                 <li nz-menu-item>option5</li>
                 <li nz-menu-item>option6</li>
                 <li nz-menu-item>option7</li>
                 <li nz-menu-item>option8</li>
               </ul>
             </li>
-            <li nz-submenu>
-              <span title><i nz-icon nzType="notification"></i>subnav 3</span>
+            <li nz-submenu nzTitle="subnav 3" nzIcon="notification">
               <ul>
                 <li nz-menu-item>option9</li>
                 <li nz-menu-item>option10</li>

diff --git a/components/layout/demo/top-side.ts b/components/layout/demo/top-side.ts
@@ -21,26 +21,23 @@ import { Component } from '@angular/core';
         <nz-layout class="inner-layout">
           <nz-sider nzWidth="200px" nzTheme="light">
             <ul nz-menu nzMode="inline" class="sider-menu">
-              <li nz-submenu nzOpen>
-                <span title><i nz-icon nzType="user"></i>subnav 1</span>
+              <li nz-submenu nzOpen nzTitle="subnav 1" nzIcon="user">
                 <ul>
                   <li nz-menu-item nzSelected>option1</li>
                   <li nz-menu-item>option2</li>
                   <li nz-menu-item>option3</li>
                   <li nz-menu-item>option4</li>
                 </ul>
               </li>
-              <li nz-submenu>
-                <span title><i nz-icon nzType="laptop"></i>subnav 2</span>
+              <li nz-submenu nzTitle="subnav 2" nzIcon="laptop">
                 <ul>
                   <li nz-menu-item>option5</li>
                   <li nz-menu-item>option6</li>
                   <li nz-menu-item>option7</li>
                   <li nz-menu-item>option8</li>
                 </ul>
               </li>
-              <li nz-submenu>
-                <span title><i nz-icon nzType="notification"></i>subnav 3</span>
+              <li nz-submenu nzTitle="subnav 3" nzIcon="notification">
                 <ul>
                   <li nz-menu-item>option9</li>
                   <li nz-menu-item>option10</li>

diff --git a/components/menu/demo/horizontal.ts b/components/menu/demo/horizontal.ts
@@ -3,33 +3,34 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-menu-horizontal',
   template: `
-    <ul nz-menu [nzMode]="'horizontal'">
-      <li nz-menu-item><i nz-icon type="mail"></i> Navigation One</li>
-      <li nz-menu-item nzDisabled><i nz-icon type="appstore"></i> Navigation Two</li>
-      <li nz-submenu>
-        <span title><i nz-icon type="setting"></i> Navigation Three - Submenu</span>
+    <ul nz-menu nzMode="horizontal">
+      <li nz-menu-item>
+        <i nz-icon nzType="mail"></i>
+        Navigation One
+      </li>
+      <li nz-menu-item nzDisabled>
+        <i nz-icon nzType="appstore"></i>
+        Navigation Two
+      </li>
+      <li nz-submenu nzTitle="Navigation Three - Submenu" nzIcon="setting">
         <ul>
-          <li nz-menu-group>
-            <span title>Item 1</span>
+          <li nz-menu-group nzTitle="Item 1">
             <ul>
               <li nz-menu-item>Option 1</li>
               <li nz-menu-item>Option 2</li>
             </ul>
           </li>
-          <li nz-menu-group>
-            <span title>Item 2</span>
+          <li nz-menu-group nzTitle="Item 2">
             <ul>
               <li nz-menu-item>Option 3</li>
               <li nz-menu-item>Option 4</li>
-              <li nz-submenu>
-                <span title>Sub Menu</span>
+              <li nz-submenu nzTitle="Sub Menu">
                 <ul>
                   <li nz-menu-item nzDisabled>Option 5</li>
                   <li nz-menu-item>Option 6</li>
                 </ul>
               </li>
-              <li nz-submenu nzDisabled>
-                <span title>Disabled Sub Menu</span>
+              <li nz-submenu nzDisabled nzTitle="Disabled Sub Menu">
                 <ul>
                   <li nz-menu-item>Option 5</li>
                   <li nz-menu-item>Option 6</li>

diff --git a/components/menu/demo/inline-collapsed.ts b/components/menu/demo/inline-collapsed.ts
@@ -3,39 +3,28 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-menu-inline-collapsed',
   template: `
-    <div style="width: 240px;">
-      <button nz-button [nzType]="'primary'" (click)="toggleCollapsed()" style="margin-bottom: 10px;">
-        <i nz-icon [type]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
+    <div class="wrapper">
+      <button nz-button [nzType]="'primary'" (click)="toggleCollapsed()">
+        <i nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
       </button>
       <ul nz-menu [nzMode]="'inline'" nzTheme="dark" [nzInlineCollapsed]="isCollapsed">
         <li nz-menu-item nz-tooltip nzPlacement="right" [nzTitle]="isCollapsed ? 'Navigation One' : ''">
-          <span title>
-            <i nz-icon type="mail"></i>
-            <span>Navigation One</span>
-          </span>
+          <i nz-icon nzType="mail"></i>
+          <span>Navigation One</span>
         </li>
-        <li nz-submenu>
-          <span title>
-            <i nz-icon type="appstore"></i>
-            <span>Navigation Two</span>
-          </span>
+        <li nz-submenu nzTitle="Navigation Two" nzIcon="appstore">
           <ul>
             <li nz-menu-item>Option 5</li>
             <li nz-menu-item>Option 6</li>
-            <li nz-submenu>
-              <span title>Submenu</span>
+            <li nz-submenu nzTitle="Submenu">
               <ul>
                 <li nz-menu-item>Option 7</li>
                 <li nz-menu-item>Option 8</li>
               </ul>
             </li>
           </ul>
         </li>
-        <li nz-submenu>
-          <span title>
-            <i nz-icon type="setting"></i>
-            <span>Navigation Three</span>
-          </span>
+        <li nz-submenu nzTitle="Navigation Three" nzIcon="setting">
           <ul>
             <li nz-menu-item>Option 9</li>
             <li nz-menu-item>Option 10</li>
@@ -44,7 +33,18 @@ import { Component } from '@angular/core';
         </li>
       </ul>
     </div>
-  `
+  `,
+  styles: [
+    `
+      .wrapper {
+        width: 240px;
+      }
+
+      button {
+        margin-bottom: 12px;
+      }
+    `
+  ]
 })
 export class NzDemoMenuInlineCollapsedComponent {
   isCollapsed = false;

diff --git a/components/menu/demo/inline.ts b/components/menu/demo/inline.ts
@@ -3,38 +3,32 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-menu-inline',
   template: `
-    <ul nz-menu [nzMode]="'inline'" style="width: 240px;">
-      <li nz-submenu>
-        <span title><i nz-icon type="mail"></i> Navigation One</span>
+    <ul nz-menu nzMode="inline">
+      <li nz-submenu nzTitle="Navigation One" nzIcon="mail">
         <ul>
-          <li nz-menu-group>
-            <span title>Item 1</span>
+          <li nz-menu-group nzTitle="Item 1">
             <ul>
               <li nz-menu-item>Option 1</li>
               <li nz-menu-item>Option 2</li>
             </ul>
           </li>
-          <li nz-menu-group>
-            <span title>Item 2</span>
+          <li nz-menu-group nzTitle="Item 2">
             <ul>
               <li nz-menu-item>Option 3</li>
               <li nz-menu-item>Option 4</li>
             </ul>
           </li>
         </ul>
       </li>
-      <li nz-submenu>
-        <span title><i nz-icon type="appstore"></i> Navigation Two</span>
+      <li nz-submenu nzTitle="Navigation Two" nzIcon="appstore">
         <ul>
           <li nz-menu-item>Option 5</li>
           <li nz-menu-item>Option 6</li>
-          <li nz-submenu>
-            <span title>Submenu</span>
+          <li nz-submenu nzTitle="Submenu">
             <ul>
               <li nz-menu-item>Option 7</li>
               <li nz-menu-item>Option 8</li>
-              <li nz-submenu>
-                <span title>Submenu</span>
+              <li nz-submenu nzTitle="Submenu">
                 <ul>
                   <li nz-menu-item>Option 9</li>
                   <li nz-menu-item>Option 10</li>
@@ -44,8 +38,7 @@ import { Component } from '@angular/core';
           </li>
         </ul>
       </li>
-      <li nz-submenu>
-        <span title><i nz-icon type="setting"></i> Navigation Three</span>
+      <li nz-submenu nzTitle="Navigation Three" nzIcon="setting">
         <ul>
           <li nz-menu-item>Option 11</li>
           <li nz-menu-item>Option 12</li>
@@ -54,6 +47,12 @@ import { Component } from '@angular/core';
       </li>
     </ul>
   `,
-  styles: []
+  styles: [
+    `
+      [nz-menu] {
+        width: 240px;
+      }
+    `
+  ]
 })
 export class NzDemoMenuInlineComponent {}
diff --git a/components/menu/demo/recursive.md b/components/menu/demo/recursive.md
@@ -7,12 +7,12 @@ title:
 
 ## zh-CN
 
-递归生成菜单，需要手动指定 `nzPaddingLeft`，仅在 `inline` 模式下有效。
+递归生成菜单，需要手动指定 `nzPaddingLeft`，仅在 `nzMode` 为 `inline` 的模式，且 `nzInlineCollapsed` 为 `false` 的情况下有效。
 
-> 追踪 Angular Issue：[https://github.com/angular/angular/issues/14842](https://github.com/angular/angular/issues/14842)
+> 追踪 Issue：[https://github.com/angular/angular/issues/14842](https://github.com/angular/angular/issues/14842)
 
 ## en-US
 
-Recursive generation menu, you need to set `nzPaddingLeft` [manually](https://github.com/angular/angular/issues/14842), only works in `inline` mode;
+Recursive generation menu, you need to set `nzPaddingLeft` [manually](https://github.com/angular/angular/issues/14842), only works when `nzMode` is `inline` mode and `nzInlineCollapsed` is `false`;
 
-> Track Angular Issue：[https://github.com/angular/angular/issues/14842](https://github.com/angular/angular/issues/14842)
+> Track Issue：[https://github.com/angular/angular/issues/14842](https://github.com/angular/angular/issues/14842)