---
name: rc-page
zhName: 页面内容区域布局
type: biz-component
---

# @alicloud/console-components-page

为阿里云控制台或其他中后台系统提供基于页面的基础布局

## 安装

### 安装最新版本

如果你的项目中之前从未安装 `@alicloud/console-components-page` ，可以直接进行该组件的安装

```bash
tnpm i -S @alicloud/console-components-page
```

如果你的项目中已经安装过该组件的历史版本，请将版本升级至 `^4.0.0`

### 需要用户安装的依赖

同级依赖：

| 依赖名称                         |   版本    |
| :------------------------------- | :-------: |
| `styled-components`              | `^4.2.0`  |
| `react`                          | `^16.8.0` |
| `react-dom`                      | `^16.8.0` |
| `prop-types`                     | `^15.7.0` |
| `@ali/wind`                      | `^2.6.0`  |
| `@alife/dpl-console-design-2019` | `^1.0.0`  |

- 在计算 `<Page.Menu>` 的布局时使用了 `IntersectionObserver` API ，目前这个 API 已经于绝大多数的浏览器中得到实现，如果你期望你的布局在低版本的浏览器下可以运行（如 `Safari < 12.0`），你需要在项目的入口文件引入 polyfill: [intersection-observer](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)

## 使用示例

### 基本使用

[MDXInstruction:importDemo:BasicDemo](./stories/basic.tsx)

### 使用带有二级导航的页面布局

使用 `<Page.Content>` 的 `menu` 属性定义页面布局中的二级导航

[MDXInstruction:importDemo:WithMenuDemo](./stories/with-menu.tsx)

### 自定义「返回上一级」按钮

在某些场景下，你可能希望对「返回上级」的行为进行深度的定制化，使用 `<Page.Header>` 的 `renderBackArrow` 属性可以帮助你实现这些自定义的行为，比如使用超链接包裹该按钮

[MDXInstruction:importDemo:WithCustomBackDemo](./stories/with-custom-back-arrow-render.tsx)

### 根据容器宽度自动截断标题

当标题太长，以至于容器宽度不足以容纳的时候，会使用`@alicloud/console-components-truncate`组件自动对标题进行截断：
[MDXInstruction:importDemo:LongTitleDemo](./stories/long-title.tsx)

### 设置背板主题

[MDXInstruction:importDemo:WithSceneryThemeDemo](./stories/with-scenery-theme.tsx)

- 在 Page 组件中，我们使用 [sceneryTheme](#IPageProps.sceneryTheme) 来标识背板容器的背景色（与设计规范一致，该属性只接受 `'white'` 和 `'grey'` ，默认为 `'white'` ）；
- 这个组件会在`useEffect`回调中设置[sceneryRef](#IPageProps.sceneryRef)元素（默认情况下是 `document.body` ）的背景颜色 。

## APIs

### Page

[MDXInstruction:renderInterface:IPageProps](./api-json/api.json)

### Page.Header

定义页面中的头部内容，通常包括面包屑导航 / 页面标题等等

[MDXInstruction:renderInterface:IHeaderProps](./api-json/api.json)

### Page.Content

定义页面主体的内容

[MDXInstruction:renderInterface:IContentProps](./api-json/api.json)

### Page.Breadcrumb

用来定义位于`Page.Header`的面包屑导航。

该组件继承自 Wind 中的 `<Breadcrumb>` 组件，推荐使用它来定义 `Page.Header.breadcrumb` 属性的内容：

```javascript
import Page from '@alicloud/console-components-page'
import { Link } from 'dva/router'

const { Breadcrumb, Header } = Page

const breadcrumb = (
  <Breadcrumb>
    <Breadcrumb.Item key="home">
      <Link to="/home">首页</Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item key="list">
      <Link to="/list">列表</Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item key="detail">详情</Breadcrumb.Item>
  </Breadcrumb>
)

const Detail = () => (
  <Page>
    <Header breadcrumb={breadcrumb} title="详情" />
  </Page>
)
```

### Page.Menu

用来定义位于`Page.Content`的页面二级导航。

> 页面一级导航由 wind-rc-app-layout 组件来定义。

Page.Menu 下包括以下组件：

|      组件      |    继承自     |
| :------------: | :-----------: |
|   Page.Menu    |      Nav      |
|   Page.Item    |   Nav.Item    |
|   Page.Group   |   Nav.Group   |
|  Page.SubMenu  |  Nav.SubNav   |
| Page.PopupItem | Nav.PopupItem |
