fix(module:drawer): fix close icon position without title property (#…

…7176) close #7164 * fix(module:drawer): fix close icon position without title property * fix(module:drawer): fix close icon position without title property * chore: follow the drawer of and-design DOM structure
NG-ZORRO · Jan 13, 2022 · a6195b9 · a6195b9
1 parent 3e9e035
commit a6195b9
Showing 1 changed file with 18 additions and 16 deletions.
diff --git a/components/drawer/drawer.component.ts b/components/drawer/drawer.component.ts
@@ -77,25 +77,27 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
             <div class="ant-drawer-wrapper-body" [style.height]="isLeftOrRight ? '100%' : null">
               <div
                 *ngIf="nzTitle || nzClosable"
-                [class.ant-drawer-header]="!!nzTitle"
+                class="ant-drawer-header"
                 [class.ant-drawer-header-close-only]="!nzTitle"
               >
-                <div *ngIf="nzTitle" class="ant-drawer-title">
-                  <ng-container *nzStringTemplateOutlet="nzTitle">
-                    <div [innerHTML]="nzTitle"></div>
-                  </ng-container>
+                <div class="ant-drawer-header-title">
+                  <button
+                    *ngIf="nzClosable"
+                    (click)="closeClick()"
+                    aria-label="Close"
+                    class="ant-drawer-close"
+                    style="--scroll-bar: 0px;"
+                  >
+                    <ng-container *nzStringTemplateOutlet="nzCloseIcon; let closeIcon">
+                      <i nz-icon [nzType]="closeIcon"></i>
+                    </ng-container>
+                  </button>
+                  <div *ngIf="nzTitle" class="ant-drawer-title">
+                    <ng-container *nzStringTemplateOutlet="nzTitle">
+                      <div [innerHTML]="nzTitle"></div>
+                    </ng-container>
+                  </div>
                 </div>
-                <button
-                  *ngIf="nzClosable"
-                  (click)="closeClick()"
-                  aria-label="Close"
-                  class="ant-drawer-close"
-                  style="--scroll-bar: 0px;"
-                >
-                  <ng-container *nzStringTemplateOutlet="nzCloseIcon; let closeIcon">
-                    <i nz-icon [nzType]="closeIcon"></i>
-                  </ng-container>
-                </button>
               </div>
               <div class="ant-drawer-body" [ngStyle]="nzBodyStyle">
                 <ng-template cdkPortalOutlet></ng-template>