fix(page-header): content has margin-top when header is not displayed, …

…closes #1795
tusen-ai · Dec 12, 2021 · 0989eee · 0989eee
1 parent 664a08d
commit 0989eee
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 41 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -9,6 +9,7 @@
 - Fix `n-tag` line-height is too low that clamps the content.
 - Fix `n-select` displays with mistake in input if `filterable` is `true`, closes [#1823](https://github.com/TuSimple/naive-ui/issues/1823).
 - Fix `n-data-table` uncheck all if indeterminate header checkbox is clicked, closes [#1827](https://github.com/TuSimple/naive-ui/issues/1827).
+- Fix `n-page-header`'s content has margin-top when header is not displayed, closes [#1795](https://github.com/TuSimple/naive-ui/issues/1795).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -9,6 +9,7 @@
 - 修复 `n-tag` 行高过低导致内容截断
 - 修复 `n-select` 设定 `filterable` 后选项过长显示出错，关闭 [#1823](https://github.com/TuSimple/naive-ui/issues/1823)
 - 修复 `n-data-table` 点击表头半选的勾选框之后没有全选，关闭 [#1827](https://github.com/TuSimple/naive-ui/issues/1827)
+- 修复 `n-page-header` 在不显示头部时内容有 margin-top，关闭 [#1795](https://github.com/TuSimple/naive-ui/issues/1795)
 
 ### Feats
 

diff --git a/src/page-header/src/PageHeader.tsx b/src/page-header/src/PageHeader.tsx
@@ -97,49 +97,54 @@ export default defineComponent({
         ]}
       >
         {headerSlot ? (
-          <div class={`${mergedClsPrefix}-page-header-header`} key="breadcrumn">
+          <div class={`${mergedClsPrefix}-page-header-header`} key="breadcrumb">
             {headerSlot()}
           </div>
         ) : null}
-        <div class={`${mergedClsPrefix}-page-header`} key="header">
-          <div class={`${mergedClsPrefix}-page-header__main`} key="back">
-            {showBack ? (
-              <div
-                class={`${mergedClsPrefix}-page-header__back`}
-                onClick={onBack}
-              >
-                <NBaseIcon clsPrefix={mergedClsPrefix}>
-                  {{
-                    default: () => <ArrowBackIcon />
-                  }}
-                </NBaseIcon>
-              </div>
-            ) : null}
-            {avatarSlot ? (
-              <div class={`${mergedClsPrefix}-page-header__avatar`}>
-                {avatarSlot()}
-              </div>
-            ) : null}
-            {showTitle ? (
-              <div class={`${mergedClsPrefix}-page-header__title`} key="title">
-                {title || titleSlot!()}
-              </div>
-            ) : null}
-            {showSubtitle ? (
-              <div
-                class={`${mergedClsPrefix}-page-header__subtitle`}
-                key="subtitle"
-              >
-                {subtitle || subtitleSlot!()}
+        {(showBack || avatarSlot || showTitle || showSubtitle || showExtra) && (
+          <div class={`${mergedClsPrefix}-page-header`} key="header">
+            <div class={`${mergedClsPrefix}-page-header__main`} key="back">
+              {showBack ? (
+                <div
+                  class={`${mergedClsPrefix}-page-header__back`}
+                  onClick={onBack}
+                >
+                  <NBaseIcon clsPrefix={mergedClsPrefix}>
+                    {{
+                      default: () => <ArrowBackIcon />
+                    }}
+                  </NBaseIcon>
+                </div>
+              ) : null}
+              {avatarSlot ? (
+                <div class={`${mergedClsPrefix}-page-header__avatar`}>
+                  {avatarSlot()}
+                </div>
+              ) : null}
+              {showTitle ? (
+                <div
+                  class={`${mergedClsPrefix}-page-header__title`}
+                  key="title"
+                >
+                  {title || titleSlot!()}
+                </div>
+              ) : null}
+              {showSubtitle ? (
+                <div
+                  class={`${mergedClsPrefix}-page-header__subtitle`}
+                  key="subtitle"
+                >
+                  {subtitle || subtitleSlot!()}
+                </div>
+              ) : null}
+            </div>
+            {showExtra ? (
+              <div class={`${mergedClsPrefix}-page-header__extra`}>
+                {extra || extraSlot!()}
               </div>
             ) : null}
           </div>
-          {showExtra ? (
-            <div class={`${mergedClsPrefix}-page-header__extra`}>
-              {extra || extraSlot!()}
-            </div>
-          ) : null}
-        </div>
+        )}
         {defaultSlot ? (
           <div class={`${mergedClsPrefix}-page-header-content`} key="content">
             {defaultSlot()}

diff --git a/src/page-header/src/styles/index.cssr.ts b/src/page-header/src/styles/index.cssr.ts
@@ -56,11 +56,13 @@ export default c([
     `)
   ]),
   cB('page-header-content', `
-    margin-top: 20px;
     font-size: var(--font-size);
-  `),
+  `, [
+    c('&:not(:first-child)', 'margin-top: 20px;')
+  ]),
   cB('page-header-footer', `
-    margin-top: 20px;
     font-size: var(--font-size);
-  `)
+  `, [
+    c('&:not(:first-child)', 'margin-top: 20px;')
+  ])
 ])