Install

npm install @b-design/ui-page

yarn add @b-design/ui-page

@b-design/ui-page

为阿里云控制台或其他中后台系统提供基于页面的基础布局。这个组件一般配合 @alicloud/console-components-app-layout 一起使用。

如果您正在使用 XConsole 框架，那么 XConsole 会帮您应用这个组件，你不需要直接使用它；

如果您没有使用 XConsole 框架，而是单独使用@alicloud/console-components组件库，那么您需要自己应用它。

安装

 tnpm i -S @b-design/ui-page

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

使用示例

基本使用

$XView

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

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

$XView

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

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

$XView

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

当标题太长，以至于容器宽度不足以容纳的时候，会自动使用@b-design/ui-truncate组件对标题进行截断：
$XView

APIs

Page

$XView

Page.Header

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

$XView

Page.Content

定义页面主体的内容

$XView

Page.Breadcrumb

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

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

 import Page from '@b-design/ui-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>
)