@alicloud/xconsole-rc-page NPM

@alicloud/xconsole-rc-page

为阿里云控制台提供基于页面的基础布局

Usage

import Page from '@alicloud/xconsole-rc-page';
import { Button } from '@alicloud/console-components'

const breadcrumb = [
  {
    text: '首页',
    to: '/home',
  },
  {
    text: '列表',
  }
]
export default () => (
  <Page
    breadcrumb={breadcrumb}
    breadcrumbExtra={<Link to="/home">帮助</Link>}
    breadcrumbExtraAlign="right"
    title="标题"
    subTitle="副标题"
    titleExtra={<Button type="primary">操作</Button>}
    titleExtraAlign="right"
    hasBackArrow
    onBackArrowClick={() => history.push('/home')}
  >
    <div>Hello XConsole</div>
  </Page>
)

APIs

参数	类型	说明
breadcrumb	breadcrumb?: IBreadcrumbItem[];	定义面包屑导航区域的内容。
breadcrumbExtra	breadcrumbExtra?: React.ReactNode;	面包屑额外内容。
breadcrumbExtraAlign	breadcrumbExtraAlign?: 'left' \| 'right';	面包屑额外内容的位置。
title	title?: React.ReactNode;	页面一级标题。
subTitle	subTitle?: React.ReactNode;	页面二级标题。
titleExtra	children?: React.ReactNode;	标题额外内容
titleExtraAlign	breadcrumbExtraAlign?: 'left' \| 'right';	标题额外内容的位置
hasBackArrow	hasBackArrow?: boolean;	是否展示「返回上级」的图标按钮。
onBackArrowClick	onBackArrowClick?: (e: React.SyntheticEvent) => void \| never;	【默认的「返回上级」按钮】所绑定的onClick回调。
menu	menu?: React.ReactNode;	内容的导航菜单。通常使用Page.Menu组件来定义，传给这个prop。
children	children?: React.ReactNode;	实际展示的内容。