4dkankan-components/docs/examples-bk/page-header/complete.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>