Created | Association | Creation Time | Effective Time |
|---|---|---|---|
Lili Qu | 421421 | 2017-01-10 | 2017-10-10 |
Remarks | |||
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China | |||
Status
Pending
Price
$568.08
Balance
$3,345.08
Price
$568.08
Balance
$3,345.08
Search
PageHeader
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.
Basic Page Header
Standard header, suitable for use in scenarios that require a brief description.
TitleThis is a subtitle
White background mode
The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.
TitleThis is a subtitle
Created | Association | Creation Time | Effective Time |
|---|---|---|---|
Lili Qu | 421421 | 2017-01-10 | 2017-10-10 |
Remarks | |||
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China | |||
Use with breadcrumbs
With breadcrumbs, it is suitable for deeper pages, allowing users to navigate quickly.
Complete example
Show all props provided by PageHeader.
TitleSubtitlePCB design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
Various forms of PageHeader
Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.
TitleThis is a subtitle
Created | Association | Creation Time |
|---|---|---|
Lili Qu | 421421 | 2017-01-10 |
Effective Time | Remarks | |
2017-10-10 | Gonghu Road, Xihu District, Hangzhou, Zhejiang, China | |
TitleThis is a subtitle
Status
Pending
Price
$568.08
Balance
$3,345.08
Responsive
Under different screen sizes, there should be different performance
API
| Property | Description | Type | Default |
|---|---|---|---|
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 | - | |
backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode | boolean | |
tags | Tag list next to title | - | |
extra | Operating area, at the end of the line of the title line | ReactNode | - |
breadcrumb | Breadcrumb configuration | - | |
footer | PageHeader's footer, generally used to render TabBar | ReactNode | - |
onBack | Back icon click event | ()=>void | ()=>history.back() |