docs/en-US/component/page-header.md
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
:::demo
page-header/complete
:::
Standard page header, for simply scenarios.
:::demo
page-header/basic
:::
The default icon might not meet your satisfaction, you can customize the icon by setting icon attribute
like the example.
:::demo
page-header/custom-icon
:::
Sometimes the page is just full of elements, and you might not want the icon to show up on the page,
you can set the icon attribute to "" to get rid of it.
:::demo
page-header/no-icon
:::
Page header allows you to add breadcrumbs for giving route information to the users by breadcrumb slot.
:::demo
page-header/breadcrumb
:::
The header can be as complicated as needed, you may add additional sections to the header, to allow rich interactions.
:::demo
page-header/additional-sections
:::
Sometimes we want the head to show with some co-responding content, we can utilize the default slot for doing so.
:::demo
page-header/main-content
:::
The component is consisted of these parts
<template>
<el-page-header>
<!-- Line 1 -->
<template #breadcrumb />
<!-- Line 2 -->
<template #icon />
<template #title />
<template #content />
<template #extra />
<!-- Lines after 2 -->
<template #default />
</el-page-header>
</template>
| Name | Description | Type | Default |
|---|---|---|---|
| icon | icon component of page header | ^[string] / ^[Component] | Back |
| title | main title of page header, default is Back that built-in a11y | ^[string] | '' |
| content | content of page header | ^[string] | '' |
| Name | Description | Type |
|---|---|---|
| back | triggers when right side is clicked | ^[Function]() => void |
| Name | Description |
|---|---|
| icon | content as icon |
| title | content as title |
| content | content |
| extra | extra |
| breadcrumb | content as breadcrumb |
| default | main content |