@b-design/ui-page
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

@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>
)

Page.Menu

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

页面一级导航由 @alicloud/console-components-app-layout 组件来定义。

Page.Menu 下包括以下组件:

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

Package Sidebar

Install

npm i @b-design/ui-page

Weekly Downloads

2

Version

0.0.1

License

MIT

Unpacked Size

76.7 MB

Total Files

1253

Last publish

Collaborators

  • dhgalien
  • chvin
  • wangcherry
  • chestnutpcj