mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-02 15:59:38 +08:00
882cec62d6
* docs: Add components overview page * fix detail * remove ContributorsList form overview page * fix components url * improve code style * remove extra file * fix detail * fix lint * fix lint * docs: Finish components overview page * fix lint * docs: Update cover * fix lint * update cover * update menu * improve overview page * refactor code * fix order * update title * add components count * fix overview page ssr bug * move less file * update title margin Co-authored-by: arvinxx <arvinx@foxmail.com>
39 lines
1.6 KiB
Markdown
39 lines
1.6 KiB
Markdown
---
|
|
category: Components
|
|
type: Navigation
|
|
title: PageHeader
|
|
cols: 1
|
|
subtitle:
|
|
cover: https://gw.alipayobjects.com/zos/alicdn/Uh-BJWMqm/PageHeader.svg
|
|
---
|
|
|
|
A header with common actions and design elements built in.
|
|
|
|
## When To Use
|
|
|
|
PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.
|
|
|
|
## API
|
|
|
|
| Param | Description | Type | Default value | Version |
|
|
| --- | --- | --- | --- | --- |
|
|
| title | Custom title text | ReactNode | - | |
|
|
| subTitle | Custom subtitle text | ReactNode | - | |
|
|
| ghost | PageHeader type, will change background color | boolean | true | |
|
|
| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | |
|
|
| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | `<ArrowLeft />` | |
|
|
| tags | Tag list next to title | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - | |
|
|
| extra | Operating area, at the end of the line of the title line | ReactNode | - | |
|
|
| breadcrumb | Breadcrumb configuration | [breadcrumb](/components/breadcrumb/) | - | |
|
|
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | |
|
|
| onBack | Back icon click event | `()=>void` | `()=>history.back()` | |
|
|
|
|
<style>
|
|
[data-theme="dark"] .site-page-header {
|
|
border: 1px solid #303030;
|
|
}
|
|
[data-theme="dark"] .site-page-header-ghost-wrapper {
|
|
background-color: rgba(255,255,255,0.08);
|
|
}
|
|
</style>
|