Fle-UI ProLayout - 高级布局组件使用指南

import { ProLayout } from '@fle-ui/pro-layout';
import { Link, useLocation } from 'umi';

export default () => {
  const location = useLocation();

  return (
    <ProLayout
      title="Fle-UI Pro"
      logo="/logo.svg"
      location={location}
      route={{
        routes: [
          { path: '/', name: '首页', icon: 'HomeOutlined' },
          { path: '/list', name: '列表页', icon: 'TableOutlined' },
        ],
      }}
      menuItemRender={(menuItemProps, defaultDom) => (
        <Link to={menuItemProps.path}>{defaultDom}</Link>
      )}
    >
      {children}
    </ProLayout>
  );
};

import { ProLayout } from '@fle-ui/pro-layout';
import { useState, useEffect } from 'react';

export default () => {
  const [menuData, setMenuData] = useState([]);

  useEffect(() => {
    fetch('/api/menu')
      .then(res => res.json())
      .then(data => setMenuData(data));
  }, []);

  return (
    <ProLayout
      menuDataRender={() => menuData}
    >
      {children}
    </ProLayout>
  );
};

<ProLayout
  menuExtraRender={({ collapsed }) => (
    !collapsed && (
      <div style={{ padding: '8px 16px' }}>
        <Input.Search placeholder="搜索菜单" />
      </div>
    )
  )}
>

<ProLayout
  footerRender={() => (
    <div style={{ textAlign: 'center', padding: '24px' }}>
      © 2024 Fle-UI. All rights reserved.
    </div>
  )}
>

<ProLayout
  menu={{ search: true }}
>

const route = {
  routes: [
    {
      path: '/detail',
      name: '详情页',
      hideInMenu: true,
      parentKeys: ['/list'],
    },
    {
      path: '/list',
      name: '列表页',
    },
  ],
};

<ProLayout
  menu={{ defaultOpenAll: true }}
>

<ProLayout
  iconfontUrl="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"
>

<ProLayout pure>

<ProLayout>
  <ProLayout route={subRoute}>
    {children}
  </ProLayout>
</ProLayout>

<ProLayout
  collapsedButtonRender={(collapsed) => (
    <Button>{collapsed ? '展开' : '收起'}</Button>
  )}
>