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

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 1 year ago committed by GitHub
parent
826c183d0b
commit
9d406ab7ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 263 additions and 231 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 483
      components/page-header/__tests__/__snapshots__/demo.test.js.snap
  2. 7
      components/page-header/demo/ghost.vue
  3. 4
      components/page-header/style/index.ts

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

@ -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"
>
<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"
>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
<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>
Operation
<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>
</button>
</div>
</div>
<!---->
<div
class="ant-space-item"
style="margin-right: 8px;"
<span
class="ant-page-header-heading-title"
title="Title"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<!---->
<span>
Operation
</span>
</button>
</div>
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-item"
class="ant-space ant-space-horizontal ant-space-align-center"
>
<button
class="ant-btn ant-btn-primary"
type="button"
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<!---->
<span>
Primary
</span>
</button>
<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>
<!---->
</div>
</span>
</div>
<div
class="ant-page-header-content"
>
</span>
</div>
<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"
>
Created
</span>
<span
class="ant-descriptions-item-content"
<div
class="ant-descriptions-item-container"
>
Lili Qu
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
<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"
>
<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"
>
Association
</span>
<span
class="ant-descriptions-item-content"
>
<a>
421421
</a>
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<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>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
<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"
>
Effective Time
</span>
<span
class="ant-descriptions-item-content"
<div
class="ant-descriptions-item-container"
>
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"
>
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"
>
Remarks
</span>
<span
class="ant-descriptions-item-content"
<div
class="ant-descriptions-item-container"
>
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</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>
</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>

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

@ -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;

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

@ -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,

Write Preview
Loading…
Cancel
Save