Skip to main content

PageHeader

The header can be used to declare the page topic, display important information about the page that the user is interested in, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.)

When To Use#

It can also be used as inter-page navigation when it is needed to make the user quickly understand what the current page is and to facilitate the user to use the page function.

Examples#

import { PageHeader } from 'tailor-ui';

Basic#

Project Name
Dashboard

with Breadcrumb#

Project Name
Page 1
Page 2

with onBack#

Project Name
Page 1
Page 2

with extra#

Project List
Create Project
This is Search Bar

overflow effect#

No lock breadcrumb item width#

API#

PropertyDescriptionTypeDefault
breadcrumbBreadcrumb configurationBreadcrumb[]
titleHeader titleReactNode
extraOperating area, at the end of the line of the title lineReactNode
onBackBack icon click event() => void
Edit this page