• Structure
• Standard
• With Image
• Simple

PageHeader页头

页头用来声明页面的主题，包含了用户所关注的最重要的信息，使用户可以快速理解当前页面是什么以及它的功能。

引用方式：

import PageHeader from 'ant-design-pro/lib/PageHeader';

详细使用方式请参照：独立使用 pro 组件

代码演示

Structure

基本结构，具备响应式布局功能，主要断点为 768px 和 576px，拖动窗口改变大小试试看。

import PageHeader from 'ant-design-pro/lib/PageHeader';
const breadcrumbList = [{
  title: '面包屑',
}];
const tabList = [{
  key: '1',
  tab: '页签一',
}, {
  key: '2',
  tab: '页签二',
}, {
  key: '3',
  tab: '页签三',
}];
ReactDOM.render(
  <div>
    <PageHeader
      className="tabs"
      title={<div className="title">Title</div>}
      logo={<div className="logo">logo</div>}
      action={<div className="action">action</div>}
      content={<div className="content">content</div>}
      extraContent={<div className="extraContent">extraContent</div>}
      breadcrumbList={breadcrumbList}
      tabList={tabList}
      tabActiveKey="1"
    />
  </div>
, mountNode);

Standard

标准页头。

import PageHeader from 'ant-design-pro/lib/PageHeader';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import { Button, Menu, Dropdown, Icon, Row, Col } from 'antd';
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const description = (
  <DescriptionList size="small" col="2">
    <Description term="创建人">曲丽丽</Description>
    <Description term="订购产品">XX 服务</Description>
    <Description term="创建时间">2017-07-07</Description>
    <Description term="关联单据"><a href="">12421</a></Description>
  </DescriptionList>
);
const menu = (
  <Menu>
    <Menu.Item key="1">选项一</Menu.Item>
    <Menu.Item key="2">选项二</Menu.Item>
    <Menu.Item key="3">选项三</Menu.Item>
  </Menu>
);
const action = (
  <div>
    <ButtonGroup>
      <Button>操作</Button>
      <Button>操作</Button>
      <Dropdown overlay={menu} placement="bottomRight">
        <Button><Icon type="ellipsis" /></Button>
      </Dropdown>
    </ButtonGroup>
    <Button type="primary">主操作</Button>
  </div>
);
const extra = (
  <Row>
    <Col sm={24} md={12}>
      <div style={{ color: 'rgba(0, 0, 0, 0.43)' }}>状态</div>
      <div style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: 20 }}>待审批</div>
    </Col>
    <Col sm={24} md={12}>
      <div style={{ color: 'rgba(0, 0, 0, 0.43)' }}>订单金额</div>
      <div style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: 20 }}>¥ 568.08</div>
    </Col>
  </Row>
);
const breadcrumbList = [{
  title: '一级菜单',
  href: '/',
}, {
  title: '二级菜单',
  href: '/',
}, {
  title: '三级菜单',
}];
const tabList = [{
  key: 'detail',
  tab: '详情',
}, {
  key: 'rule',
  tab: '规则',
}];
function onTabChange(key) {
  console.log(key);
}
ReactDOM.render(
  <div>
    <PageHeader
      title="单号：234231029431"
      logo={<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />}
      action={action}
      content={description}
      extraContent={extra}
      breadcrumbList={breadcrumbList}
      tabList={tabList}
      tabActiveKey="detail"
      onTabChange={onTabChange}
    />
  </div>
, mountNode);

With Image

带图片的页头。

import PageHeader from 'ant-design-pro/lib/PageHeader';
const content = (
  <div>
    <p>段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。</p>
    <div className="link">
      <a>
        <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" /> 快速开始
      </a>
      <a>
        <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" /> 产品简介
      </a>
      <a>
        <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" /> 产品文档
      </a>
    </div>
  </div>
);
const extra = (
  <div className="imgContainer">
    <img style={{ width: '100%' }} alt="" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" />
  </div>
);
const breadcrumbList = [{
  title: '一级菜单',
  href: '/',
}, {
  title: '二级菜单',
  href: '/',
}, {
  title: '三级菜单',
}];
ReactDOM.render(
  <div>
    <PageHeader
      title="这是一个标题"
      content={content}
      extraContent={extra}
      breadcrumbList={breadcrumbList}
    />
  </div>
, mountNode);

Simple

简单的页头。

import PageHeader from 'ant-design-pro/lib/PageHeader';
const breadcrumbList = [{
  title: '一级菜单',
  href: '/',
}, {
  title: '二级菜单',
  href: '/',
}, {
  title: '三级菜单',
}];
ReactDOM.render(
  <div>
    <PageHeader title="页面标题" breadcrumbList={breadcrumbList} />
  </div>
, mountNode);

API

面包屑的配置方式有三种，一是直接配置 breadcrumbList，二是结合 react-router@2 react-router@3，配置 routes 及 params 实现，类似 面包屑 Demo，三是结合 react-router@4，配置 location breadcrumbNameMap，优先级依次递减，脚手架中使用最后一种。 对于后两种用法，你也可以将 routes params 及 location breadcrumbNameMap 放到 context 中，组件会自动获取。