github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(PageHeader): ghost style (#6761) 

* test(pageheader): update test snap

* fix: ghost style

* fix: ghost style

* chore(pageheader): update ghost demo

* test(pageheader): update test snap
pull/6805/head
Cherry7 2023-07-31 08:49:35 +08:00 committed by GitHub
parent 826c183d0b
commit 9d406ab7ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 271 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

499
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -867,7 +867,6 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
class="ant-space-item" class="ant-space-item"
> >
<!---->
<button <button
class="ant-btn ant-btn-default ant-dropdown-trigger" class="ant-btn ant-btn-default ant-dropdown-trigger"
style="padding: 0px;" style="padding: 0px;"
@ -898,6 +897,7 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
</span> </span>
</button> </button>
<!---->
</div> </div>
<!----> <!---->
@ -978,277 +978,304 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = ` exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = `
<div <div
class="demo-page-header" data-v-app=""
style="background-color: rgb(245, 245, 245); padding: 24px;"
> >
<div <div
class="ant-page-header" class="demo-page-header"
style="background-color: rgb(245, 245, 245); padding: 24px;"
> >
<!---->
<div <div
class="ant-page-header-heading" class="ant-page-header"
> >
<!---->
<div <div
class="ant-page-header-heading-left" class="ant-page-header-heading"
> >
<div <div
class="ant-page-header-back" class="ant-page-header-heading-left"
> >
<div <div
aria-label="Back" class="ant-page-header-back"
class="ant-page-header-back-button" >
role="button" <div
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;" aria-label="Back"
tabindex="0" class="ant-page-header-back-button"
role="button"
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
tabindex="0"
>
<span
aria-label="arrow-left"
class="anticon anticon-arrow-left"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="arrow-left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 000 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
</div>
</div>
<!---->
<span
class="ant-page-header-heading-title"
title="Title"
>
Title
</span>
<span
class="ant-page-header-heading-sub-title"
title="This is a subtitle"
>
This is a subtitle
</span>
<!---->
</div>
<span
class="ant-page-header-heading-extra"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
> >
<span
aria-label="arrow-left" <div
class="anticon anticon-arrow-left" class="ant-space-item"
role="img" style="margin-right: 8px;"
> >
<svg <button
aria-hidden="true" class="ant-btn ant-btn-default"
class="" type="button"
data-icon="arrow-left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
> >
<path <!---->
d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 000 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
/> <span>
</svg> Operation
</span> </span>
</button>
</div>
<!---->
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<!---->
<span>
Operation
</span>
</button>
</div>
<!---->
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<!---->
<span>
Primary
</span>
</button>
</div>
<!---->
</div> </div>
</div>
<!---->
<span
class="ant-page-header-heading-title"
title="Title"
>
Title
</span> </span>
<span
class="ant-page-header-heading-sub-title"
title="This is a subtitle"
>
This is a subtitle
</span>
<!---->
</div> </div>
<span
class="ant-page-header-heading-extra"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<!---->
<span>
Operation
</span>
</button>
</div>
<!---->
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<!---->
<span>
Operation
</span>
</button>
</div>
<!---->
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<!---->
<span>
Primary
</span>
</button>
</div>
<!---->
</div>
</span>
</div>
<div
class="ant-page-header-content"
>
<div <div
class="ant-descriptions ant-descriptions-small" class="ant-page-header-content"
> >
<!---->
<div <div
class="ant-descriptions-view" class="ant-descriptions ant-descriptions-small"
> >
<table> <!---->
<tbody> <div
class="ant-descriptions-view"
<tr >
class="ant-descriptions-row" <table>
> <tbody>
<td <tr
class="ant-descriptions-item" class="ant-descriptions-row"
colspan="1"
> >
<div
class="ant-descriptions-item-container" <td
class="ant-descriptions-item"
colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Created <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Created
</span>
<span
class="ant-descriptions-item-content"
>
Lili Qu
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
> >
<span
Lili Qu class="ant-descriptions-item-label"
>
</span> Association
</div> </span>
</td> <span
<td class="ant-descriptions-item-content"
class="ant-descriptions-item" >
colspan="1"
<a>
421421
</a>
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Creation Time
</span>
<span
class="ant-descriptions-item-content"
>
2017-01-10
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
> >
<div
class="ant-descriptions-item-container" <td
class="ant-descriptions-item"
colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Association <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Effective Time
> </span>
<span
<a> class="ant-descriptions-item-content"
421421 >
</a>
2017-10-10
</span>
</div> </span>
</td> </div>
<td </td>
class="ant-descriptions-item" <td
colspan="1" class="ant-descriptions-item"
> colspan="2"
<div
class="ant-descriptions-item-container"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Creation Time <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Remarks
> </span>
<span
2017-01-10 class="ant-descriptions-item-content"
>
</span>
</div> Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</td>
</span>
</div>
</td>
</tr>
</tr> </tbody>
<tr </table>
class="ant-descriptions-row" </div>
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Effective Time
</span>
<span
class="ant-descriptions-item-content"
>
2017-10-10
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Remarks
</span>
<span
class="ant-descriptions-item-content"
>
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
<!---->
</div> </div>
<!---->
</div> </div>
<label
class="ant-checkbox-wrapper"
style="margin-top: 0.5rem;"
>
<span
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
<span>
toggle ghost
</span>
</label>
</div> </div>
`; `;
@ -1663,7 +1690,6 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden" class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
> >
<!---->
<button <button
aria-controls="null-more-popup" aria-controls="null-more-popup"
aria-expanded="false" aria-expanded="false"
@ -1696,6 +1722,7 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
</svg> </svg>
</span> </span>
</button> </button>
<!---->
<!----> <!---->
</div> </div>

7
components/page-header/demo/ghost.vue
View File

@ -19,7 +19,7 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
<template> <template>
<div class="demo-page-header" style="background-color: #f5f5f5; padding: 24px"> <div class="demo-page-header" style="background-color: #f5f5f5; padding: 24px">
<a-page-header <a-page-header
:ghost="false" :ghost="ghost"
title="Title" title="Title"
sub-title="This is a subtitle" sub-title="This is a subtitle"
@back="() => $router.go(-1)" @back="() => $router.go(-1)"
@ -42,7 +42,12 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
</a-descriptions> </a-descriptions>
</a-page-header> </a-page-header>
</div> </div>
<a-checkbox v-model:checked="ghost" style="margin-top: 0.5rem">toggle ghost</a-checkbox>
</template> </template>
<script lang="ts" setup>
import { ref } from 'vue';
const ghost = ref(false);
</script>
<style scoped> <style scoped>
.demo-page-header :deep(tr:last-child td) { .demo-page-header :deep(tr:last-child td) {
padding-bottom: 0; padding-bottom: 0;

4
components/page-header/style/index.ts
View File

@ -26,7 +26,7 @@ const genPageHeaderStyle: GenerateStyle<PageHeaderToken, CSSObject> = token => {
padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`, padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`,
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
[`${componentCls}-ghost`]: { [`&${componentCls}-ghost`]: {
backgroundColor: token.pageHeaderGhostBg, backgroundColor: token.pageHeaderGhostBg,
}, },
@ -146,7 +146,7 @@ export default genComponentStyleHook('PageHeader', token => {
pageHeaderPaddingBreadcrumb: token.paddingSM, pageHeaderPaddingBreadcrumb: token.paddingSM,
pageHeaderContentPaddingVertical: token.paddingSM, pageHeaderContentPaddingVertical: token.paddingSM,
pageHeaderBackColor: token.colorTextBase, pageHeaderBackColor: token.colorTextBase,
pageHeaderGhostBg: 'inherit', pageHeaderGhostBg: 'transparent',
pageHeaderHeadingTitle: token.fontSizeHeading4, pageHeaderHeadingTitle: token.fontSizeHeading4,
pageHeaderHeadingSubTitle: token.fontSize, pageHeaderHeadingSubTitle: token.fontSize,
pageHeaderTabFontSize: token.fontSizeLG, pageHeaderTabFontSize: token.fontSizeLG,