8lab_layout 中文文档教程

Question

通用布局组件

---

全局 layout

配合 umi 约定式路由 全局 layout 使用

需要禁用 antd pro 默认的 layout 与 menu 方案(删除 app.tsx 的 const layout 定义, config/config.ts 中的 layout, defaultSettings.ts 中的 menu)

在 config 下新建 layout 文件夹 新增 menu.ts 和 redirect.js

menu.ts 返回一个函数, 其返回值为一个数组类型的 promise, 即远程菜单数据

redirect.js 直接 export default {'/': '/pageA'}对象内部为跳转映射

// src/layouts/index.tsx
import React, { ReactElement } from 'react';
import { Layout } from '@ncompass/nc-access';
import { DynamicRouteLayout } from '@ncompass/nc-layout';
import RightContent from '@/components/RightContent';

export default (props: Record<string, any>): ReactElement => {
  return (
    <DynamicRouteLayout {...props} rightContentRender={RightContent}>
      <Layout {...props} />
    </DynamicRouteLayout>
  );
};

menu.ts

config/layout/menu.ts 中配置的 route 可以接受所有 antd pro 的菜单选项 同时接受以下自定义选项

名称	类型	说明
disable	boolean	此菜单项是否禁用
collapse	boolean	是否在当前一级菜单页显示二级菜单 collapse 按钮, 此配置只有在一级菜单时生效

props

可以接受所有 antd pro 的 basicLayout 的参数

自定义参数：

名称	类型	说明
accordion	boolean	菜单手风琴模式, 同级菜单只能展开一个
wrapper	boolean	全局配置所有页面均不渲染内容页 wrapper
events	{onContextMenu: () => void, onClick: () => void}	菜单自定义事件
extraMenuHeaderAfterCollapseBtn	Record	 可以单独为某一一级菜单页定制二级菜单 header, 会渲染在’全部‘的右边, 如果显示 collapse 按钮, 则会显示在 collapse 按钮左侧

nc-layout 提供了一个 DynamicRouteLayoutContext

可以在具体页面使用 React.useContext 引用

此 context 可以接收如下返回值

import { DynamicRouteLayoutContext } from '@ncompass/nc-layout';
const {
  actionRef, //actionRef.current.reload()  layout整体刷新
  containerRef, //containerRef.current  右侧内容容器  .ncLayoutComponentWrapper>.mainLayouts ref指向
  headerRef, //容器内部header指向
  footerRef, //容器内部footer指向
  menuLoaded, //菜单远程数据加载完毕触发变化
  menu, //菜单内容数组
} = React.useContext(DynamicRouteLayoutContext);

针对特定需求 nc-layout 暂接受 2 种页面返回值

//src/pages/demo.tsx
import React, { useState } from 'react';

const Page = (): React.ReactElement => {
    ...
}

Page.contonly = true // 不渲染菜单与layout header, 只渲染内容区域
Page.noWrapper = true // 不额外渲染容器区域全局wrapper: .ncLayoutComponentWrapper和.mainLayouts

export default Page

在具体页面为内容布局时, nc-layout 提供 3 种辅助布局工具

//src/pages/demo.tsx
import React, { useState } from 'react';
import { ContentHeader, ContentFooter, ContentMask } from '@ncompass/nc-layout';

export default (): React.ReactElement => {
  const [loading, setLoading] = useState(false); //控制遮罩层是否显示

  return (
    <div className="myPageContainer">
      <ContentHeader>demo page header</ContentHeader>
      <ContentFooter>demo page footer</ContentFooter>
      <ContentMask loading={loading} />
      demo page content text
    </div>
  );
};

其中 ContentHeader 为标准页头样式

ContentFooter 可以传入自定义 style

两者内部皆使用 flex 布局

效果如下： ![nclayout]

NC-Grid

使用 display: grid;作为布局方式的布局组件  可以比较灵活的生成符合开发规范的布局容器

    import React from 'react';
    import { NCGrid } from '@ncompass/nc-layout';

    const { NCSection } = NCGrid

    ...

    <NCGrid>
        <NCSection width="55%" title={<button>xxx</button>}>
            <div style={{width: 1780}}>213</div>
        </NCSection>
        <NCGrid direction="column">
            <NCSection/>
            <NCGrid height={500}>
                <NCSection title="zzx">
                    <div style={{height: 780}}>213</div>
                </NCSection>
                <NCSection/>
            </NCGrid>
        </NCGrid>
        <NCSection width={112}/>
    </NCGrid>

展示效果如下图：

![ncgrid]