@aliwind/rc-page

React component for Alibaba Cloud.

Usage no npm install needed!

<script type="module">
  import aliwindRcPage from 'https://cdn.skypack.dev/@aliwind/rc-page';
</script>

README


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