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 snappull/6805/head
Cherry7
GitHub
parent
826c183d0b
commit
9d406ab7ba
|
|
@ -867,7 +867,6 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
|
|||
class="ant-space-item"
|
||||
>
|
||||
|
||||
<!---->
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-dropdown-trigger"
|
||||
style="padding: 0px;"
|
||||
|
|
@ -898,6 +897,7 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
|
|||
</span>
|
||||
|
||||
</button>
|
||||
<!---->
|
||||
|
||||
</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`] = `
|
||||
<div
|
||||
class="demo-page-header"
|
||||
style="background-color: rgb(245, 245, 245); padding: 24px;"
|
||||
data-v-app=""
|
||||
>
|
||||
|
||||
<div
|
||||
class="ant-page-header"
|
||||
class="demo-page-header"
|
||||
style="background-color: rgb(245, 245, 245); padding: 24px;"
|
||||
>
|
||||
<!---->
|
||||
<div
|
||||
class="ant-page-header-heading"
|
||||
class="ant-page-header"
|
||||
>
|
||||
<!---->
|
||||
<div
|
||||
class="ant-page-header-heading-left"
|
||||
class="ant-page-header-heading"
|
||||
>
|
||||
<div
|
||||
class="ant-page-header-back"
|
||||
class="ant-page-header-heading-left"
|
||||
>
|
||||
<div
|
||||
aria-label="Back"
|
||||
class="ant-page-header-back-button"
|
||||
role="button"
|
||||
style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
|
||||
tabindex="0"
|
||||
class="ant-page-header-back"
|
||||
>
|
||||
<div
|
||||
aria-label="Back"
|
||||
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"
|
||||
class="anticon anticon-arrow-left"
|
||||
role="img"
|
||||
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="arrow-left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<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>
|
||||
<!---->
|
||||
|
||||
<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>
|
||||
</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"
|
||||
>
|
||||
|
||||
|
||||
<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
|
||||
class="ant-descriptions ant-descriptions-small"
|
||||
class="ant-page-header-content"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="ant-descriptions-view"
|
||||
class="ant-descriptions ant-descriptions-small"
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<!---->
|
||||
<div
|
||||
class="ant-descriptions-view"
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
<td
|
||||
class="ant-descriptions-item"
|
||||
colspan="1"
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-item-container"
|
||||
|
||||
<td
|
||||
class="ant-descriptions-item"
|
||||
colspan="1"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
<div
|
||||
class="ant-descriptions-item-container"
|
||||
>
|
||||
Created
|
||||
</span>
|
||||
<span
|
||||
class="ant-descriptions-item-content"
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
>
|
||||
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"
|
||||
>
|
||||
|
||||
Lili Qu
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-descriptions-item"
|
||||
colspan="1"
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
>
|
||||
Association
|
||||
</span>
|
||||
<span
|
||||
class="ant-descriptions-item-content"
|
||||
>
|
||||
|
||||
<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
|
||||
class="ant-descriptions-item-label"
|
||||
<div
|
||||
class="ant-descriptions-item-container"
|
||||
>
|
||||
Association
|
||||
</span>
|
||||
<span
|
||||
class="ant-descriptions-item-content"
|
||||
>
|
||||
|
||||
<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"
|
||||
>
|
||||
Effective Time
|
||||
</span>
|
||||
<span
|
||||
class="ant-descriptions-item-content"
|
||||
>
|
||||
|
||||
2017-10-10
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-descriptions-item"
|
||||
colspan="2"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
<div
|
||||
class="ant-descriptions-item-container"
|
||||
>
|
||||
Creation Time
|
||||
</span>
|
||||
<span
|
||||
class="ant-descriptions-item-content"
|
||||
>
|
||||
|
||||
2017-01-10
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<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>
|
||||
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
|
||||
<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>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
`;
|
||||
|
||||
|
|
@ -1663,7 +1690,6 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
|
|||
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
|
||||
>
|
||||
|
||||
<!---->
|
||||
<button
|
||||
aria-controls="null-more-popup"
|
||||
aria-expanded="false"
|
||||
|
|
@ -1696,6 +1722,7 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
|
|||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
|
|||
<template>
|
||||
<div class="demo-page-header" style="background-color: #f5f5f5; padding: 24px">
|
||||
<a-page-header
|
||||
:ghost="false"
|
||||
:ghost="ghost"
|
||||
title="Title"
|
||||
sub-title="This is a subtitle"
|
||||
@back="() => $router.go(-1)"
|
||||
|
|
@ -42,7 +42,12 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
|
|||
</a-descriptions>
|
||||
</a-page-header>
|
||||
</div>
|
||||
<a-checkbox v-model:checked="ghost" style="margin-top: 0.5rem">toggle ghost</a-checkbox>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
const ghost = ref(false);
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-page-header :deep(tr:last-child td) {
|
||||
padding-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const genPageHeaderStyle: GenerateStyle<PageHeaderToken, CSSObject> = token => {
|
|||
padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
|
||||
[`${componentCls}-ghost`]: {
|
||||
[`&${componentCls}-ghost`]: {
|
||||
backgroundColor: token.pageHeaderGhostBg,
|
||||
},
|
||||
|
||||
|
|
@ -146,7 +146,7 @@ export default genComponentStyleHook('PageHeader', token => {
|
|||
pageHeaderPaddingBreadcrumb: token.paddingSM,
|
||||
pageHeaderContentPaddingVertical: token.paddingSM,
|
||||
pageHeaderBackColor: token.colorTextBase,
|
||||
pageHeaderGhostBg: 'inherit',
|
||||
pageHeaderGhostBg: 'transparent',
|
||||
pageHeaderHeadingTitle: token.fontSizeHeading4,
|
||||
pageHeaderHeadingSubTitle: token.fontSize,
|
||||
pageHeaderTabFontSize: token.fontSizeLG,
|
||||
|
|
|
|||
Loading…
Reference in New Issue