--- order: 4 title: zh-CN: 组合示例 en-US: Complete example --- ## zh-CN 使用了 PageHeader 提供的所有能力。 ## en-US Show all props provided by PageHeader. ```jsx import { PageHeader, Menu, Dropdown, Button, Tag, Typography, Row } from 'antd'; import { EllipsisOutlined } from '@ant-design/icons'; const { Paragraph } = Typography; const menu = ( 1st menu item 2nd menu item 3rd menu item ); const DropdownMenu = () => { return ( ); }; const routes = [ { path: 'index', breadcrumbName: 'First-level Menu', }, { path: 'first', breadcrumbName: 'Second-level Menu', }, { path: 'second', breadcrumbName: 'Third-level Menu', }, ]; const IconLink = ({ src, text }) => ( {text} {text} ); const content = ( <> Ant Design interprets the color system into two levels: a system-level color system and a product-level color system. Ant Design's 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.
); const Content = ({ children, extraContent }) => { return (
{children}
{extraContent}
); }; ReactDOM.render( Running} extra={[ , , , , ]} avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }} breadcrumb={{ routes }} > } > {content} , mountNode, ); ``` ```css #components-page-header-demo-content .image { margin: 0 0 0 60px; display: flex; align-items: center; } #components-page-header-demo-content .example-link { margin-right: 16px; } #components-page-header-demo-content .example-link-icon { margin-right: 8px; } #components-page-header-demo-content .ant-page-header-rtl .example-link { float: right; margin-right: 0; margin-left: 16px; } #components-page-header-demo-content .ant-page-header-rtl .example-link-icon { margin-right: 0; margin-left: 8px; } @media (max-width: 768px) { #components-page-header-demo-content .image { flex: 100%; margin: 24px 0 0; } } ```