ant-design-vue/components/page-header/demo/actions.vue

75 lines
2.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<docs>
---
order: 5
title:
zh-CN: 多种形态的 PageHeader
en-US: Various forms of PageHeader
---
## zh-CN
使用操作区并自定义子节点适合使用在需要展示一些复杂的信息帮助用户快速了解这个页面的信息和操作
## en-US
Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.
</docs>
<template>
<div>
<a-page-header
class="demo-page-header"
style="border: 1px solid rgb(235, 237, 240)"
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>
<br />
<a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
<template #tags>
<a-tag color="blue">Running</a-tag>
</template>
<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-row type="flex">
<a-statistic title="Status" value="Pending" />
<a-statistic
title="Price"
prefix="$"
:value="568.08"
:style="{
margin: '0 32px',
}"
/>
<a-statistic title="Balance" prefix="$" :value="3345.08" />
</a-row>
</a-page-header>
</div>
</template>
<style scoped>
.demo-page-header :deep(tr:last-child td) {
padding-bottom: 0;
}
</style>