mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-14 18:11:48 +08:00
ade87f6729
* docs: standardize unified example code format and fix some example type * docs: update some example type * Update docs/examples/descriptions/sizes.vue Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * docs: update example-page-header * docs: update example-page-header --------- Co-authored-by: kooriookami <38392315+kooriookami@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>
|