element-plus/docs/examples/page-header/additional-sections.vue
Jeremy 9230af7976
feat(components): [page-header] enhancement (#9215)
* 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>
2022-08-20 21:41:49 +08:00

25 lines
725 B
Vue

<template>
<el-page-header :icon="null">
<template #content>
<div class="flex items-center">
<el-avatar
:size="32"
class="mr-3"
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-page-header>
</template>