mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-15 03:06:25 +08:00
9230af7976
* feat(components): [page-header] enhancement * Add new slot `extra` for page header. * Add addtional documentations for page header. * chore: update doc * feat: add default slot * chore: add a11y support for back button * chore: update examples * chore: enhancements * chore: example enhancement * chore: restore previous actions for back button * chore: address PR comments Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
70 lines
2.3 KiB
Vue
70 lines
2.3 KiB
Vue
<template>
|
|
<div aria-label="A complete example of page header">
|
|
<el-page-header @back="onBack">
|
|
<template #breadcrumb>
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: './page-header.html' }">
|
|
homepage
|
|
</el-breadcrumb-item>
|
|
<el-breadcrumb-item
|
|
><a href="./page-header.html">route 1</a></el-breadcrumb-item
|
|
>
|
|
<el-breadcrumb-item>route 2</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</template>
|
|
<template #content>
|
|
<div class="flex items-center">
|
|
<el-avatar
|
|
class="mr-3"
|
|
:size="32"
|
|
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
|
/>
|
|
<span class="text-large font-600 mr-3"> Title </span>
|
|
<span
|
|
class="text-sm mr-2"
|
|
style="color: var(--el-text-color-regular)"
|
|
>
|
|
Sub title
|
|
</span>
|
|
<el-tag>Default</el-tag>
|
|
</div>
|
|
</template>
|
|
<template #extra>
|
|
<div class="flex items-center">
|
|
<el-button>Print</el-button>
|
|
<el-button type="primary" class="ml-2">Edit</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<el-descriptions :column="3" size="small" class="mt-4">
|
|
<el-descriptions-item label="Username"
|
|
>kooriookami</el-descriptions-item
|
|
>
|
|
<el-descriptions-item label="Telephone"
|
|
>18100000000</el-descriptions-item
|
|
>
|
|
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
|
<el-descriptions-item label="Remarks">
|
|
<el-tag size="small">School</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="Address"
|
|
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<p class="mt-4 text-sm">
|
|
Element Plus team uses <b>weekly</b> release strategy under normal
|
|
circumstance, but critical bug fixes would require hotfix so the actual
|
|
release number <b>could be</b> more than 1 per week.
|
|
</p>
|
|
</el-page-header>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElNotification as notify } from 'element-plus'
|
|
|
|
const onBack = () => {
|
|
notify('Back')
|
|
}
|
|
</script>
|