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

@aliwind/rc-page

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

安装

安装最新版本

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

tnpm i -S @aliwind/rc-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

使用示例

基本使用

MDXInstruction:importDemo:BasicDemo

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

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

MDXInstruction:importDemo:WithMenuDemo

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

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

MDXInstruction:importDemo:WithCustomBackDemo

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

当标题太长，以至于容器宽度不足以容纳的时候，会使用@aliwind/rc-truncate组件自动对标题进行截断： MDXInstruction:importDemo:LongTitleDemo

设置背板主题

MDXInstruction:importDemo:WithSceneryThemeDemo

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

APIs

Page

MDXInstruction:renderInterface:IPageProps

Page.Header

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

MDXInstruction:renderInterface:IHeaderProps

Page.Content

定义页面主体的内容

MDXInstruction:renderInterface:IContentProps

Page.Breadcrumb

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

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

import Page from '@aliwind/rc-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 |