2019-03-02 15:51:08 +08:00
|
|
|
---
|
2019-10-15 11:46:12 +08:00
|
|
|
order: 3
|
2019-03-02 15:51:08 +08:00
|
|
|
title:
|
|
|
|
zh-CN: 带面包屑页头
|
|
|
|
en-US: Use with breadcrumbs
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
带面包屑页头,适合层级比较深的页面,让用户可以快速导航。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
With breadcrumbs, it is suitable for deeper pages, allowing users to navigate quickly.
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
```tsx
|
2019-03-02 15:51:08 +08:00
|
|
|
import { PageHeader } from 'antd';
|
2022-05-21 22:14:15 +08:00
|
|
|
import React from 'react';
|
2019-03-02 15:51:08 +08:00
|
|
|
|
|
|
|
const routes = [
|
|
|
|
{
|
|
|
|
path: 'index',
|
|
|
|
breadcrumbName: 'First-level Menu',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'first',
|
|
|
|
breadcrumbName: 'Second-level Menu',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'second',
|
|
|
|
breadcrumbName: 'Third-level Menu',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const App: React.FC = () => (
|
2019-10-15 11:46:12 +08:00
|
|
|
<PageHeader
|
2019-12-23 18:36:49 +08:00
|
|
|
className="site-page-header"
|
2019-10-15 11:46:12 +08:00
|
|
|
title="Title"
|
|
|
|
breadcrumb={{ routes }}
|
|
|
|
subTitle="This is a subtitle"
|
2022-04-03 23:27:45 +08:00
|
|
|
/>
|
2019-08-25 15:38:51 +08:00
|
|
|
);
|
2022-05-19 09:46:26 +08:00
|
|
|
|
|
|
|
export default App;
|
2019-03-02 15:51:08 +08:00
|
|
|
```
|