56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<docs>
|
||
---
|
||
order: 2
|
||
title:
|
||
zh-CN: 白底模式
|
||
en-US: white background mode
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
默认 PageHeader 是透明底色的。在某些情况下，PageHeader 需要自己的背景颜色。
|
||
|
||
## en-US
|
||
|
||
The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.
|
||
|
||
</docs>
|
||
|
||
<template>
|
||
<div class="demo-page-header" style="background-color: #f5f5f5; padding: 24px">
|
||
<a-page-header
|
||
:ghost="ghost"
|
||
title="Title"
|
||
sub-title="This is a subtitle"
|
||
@back="() => $router.go(-1)"
|
||
>
|
||
<template #extra>
|
||
<a-button key="3">Operation</a-button>
|
||
<a-button key="2">Operation</a-button>
|
||
<a-button key="1" type="primary">Primary</a-button>
|
||
</template>
|
||
<a-descriptions size="small" :column="3">
|
||
<a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
|
||
<a-descriptions-item label="Association">
|
||
<a>421421</a>
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
|
||
<a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
|
||
<a-descriptions-item label="Remarks">
|
||
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
|
||
</a-descriptions-item>
|
||
</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;
|
||
}
|
||
</style>
|