混合菜单新模式
样例
Ant Design Pro Blog 文档
这个明显就比非混合的好看很多,今天就来试试改一改吧
现在官网中找到ProLayout
就可以找到这个混合模式的源码样例
import React from 'react';
import ProLayout, { PageContainer } from '@ant-design/pro-layout';
import complexMenu from './complexMenu';
export default () => (
<div
style={{
height: 400,
overflow: 'auto',
}}
>
<ProLayout
location={{
pathname: '/articles/new',
}}
route={{
routes: complexMenu,
}}
disableContentMargin
layout="top"
>
<ProLayout
location={{
pathname: '/home/overview',
}}
route={{
routes: complexMenu,
}}
navTheme="light"
menuHeaderRender={false}
>
<PageContainer content="欢迎使用">
<div>Hello World</div>
</PageContainer>
</ProLayout>
</ProLayout>
</div>
);
有点抽象,但是要怎么使用呢?
这里我用之前搭建的脚手架新项目里的BasicLayout.jsx来修改
这里可以把这个布局理解为在之前的脚手架菜单基础上,添加一个topmenu。然后将原先的rightcontent和menuheader隐藏掉就行。是不是很容易理解?要是理解不了,可以把我之后的代码自己测测看,改动一下就能了解了。
Tips:ProLayout所有以 Render 后缀的方法都可以通过传入 false 来使其不渲染。
那就直接上代码了
BasicLayout.jsx
/**
* Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
* You can view component api by:
* https://github.com/ant-design/ant-design-pro-layout
*/
import ProLayout, { DefaultFooter} from '@ant-design/pro-layout';
import React, { useEffect } from 'react';
import { Link, useIntl, connect, history } from 'umi';
import { GithubOutlined } from '@ant-design/icons';
import { Result, Button } from 'antd';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import { getAuthorityFromRouter } from '@/utils/utils';
import logo from '../assets/elestric.png';
//logo我是自己挑的,没有用默认的
const noMatch = (
<Result
status={403}
title="403"
subTitle="Sorry, you are not authorized to access this page."
extra={
<Button type="primary">
<Link to="/user/login">Go Login</Link>
</Button>
}
/>
);
/**
* use Authorized check all menu item
*/
const menuDataRender = (menuList) =>
menuList.map((item) => {
const localItem = {
...item,
children: item.children ? menuDataRender(item.children) : undefined,
};
return Authorized.check(item.authority, localItem, null);
});
const defaultFooterDom = (
<DefaultFooter
copyright={`${new Date().getFullYear()} 蚂蚁集团体验技术部出品`}
links={[
{
key: 'Ant Design Pro',
title: 'Ant Design Pro',
href: 'https://pro.ant.design',
blankTarget: true,
},
{
key: 'github',
title: <GithubOutlined />,
href: 'https://github.com/ant-design/ant-design-pro',
blankTarget: true,
},
{
key: 'Ant Design',
title: 'Ant Design',
href: 'https://ant.design',
blankTarget: true,
},
]}
/>
);
const BasicLayout = (props) => {
const {
dispatch,
children,
settings,
location = {
pathname: '/',
},
} = props;
/**
* constructor
*/
useEffect(() => {
if (dispatch) {
dispatch({
type: 'user/fetchCurrent',
});
}
}, []);
/**
* init variables
*/
const handleMenuCollapse = (payload) => {
if (dispatch) {
dispatch({
type: 'global/changeLayoutCollapsed',
payload,
});
}
}; // get children authority
const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || {
authority: undefined,
};
const { formatMessage } = useIntl();
return (
<ProLayout
logo={<img
alt="logo"
style={{ height: '32px' }}
src={logo}
onClick={() => {
handleMenuCollapse(!props.collapsed);
}}
/>}
title="my new ant pro project"
layout="topmenu"
disableMobile
rightContentRender={(rightProps) => <RightContent {...rightProps} {...settings} />}
contentStyle={{ margin: 0 }}
>
<ProLayout
// logo={logo}
// formatMessage={formatMessage}
//因为topmenu已经有logo了,所以我们选择将菜单的logo不渲染
menuHeaderRender={false}
//footer不好看,我把它也关了
footerRender={false}
formatMessage={formatMessage}
onCollapse={handleMenuCollapse}
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || menuItemProps.children || !menuItemProps.path) {
return defaultDom;
}
return <Link to={menuItemProps.path}>{defaultDom}</Link>;
}}
breadcrumbRender={(routers = []) => [
{
path: '/',
breadcrumbName: formatMessage({
id: 'menu.home',
}),
},
...routers,
]}
itemRender={(route, params, routes, paths) => {
const first = routes.indexOf(route) === 0;
return first ? (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
) : (
<span>{route.breadcrumbName}</span>
);
}}
menuDataRender={menuDataRender}
//因为rightcontent为空,所以header也没有渲染的必要
headerRender={false}
rightContentRender={false}
{...props}
{...settings}
>
<Authorized authority={authorized.authority} noMatch={noMatch}>
{children}
</Authorized>
</ProLayout>
</ProLayout>
);
};
export default connect(({ global, settings }) => ({
collapsed: global.collapsed,
settings,
}))(BasicLayout);
当然别忘了把下面的menu颜色改了
defaultSettings.js
const proSettings = {
//改成白色
navTheme: 'white',
// 拂晓蓝
primaryColor: '#1890ff',
layout: 'side',
contentWidth: 'Fluid',
fixedHeader: false,
fixSiderbar: true,
colorWeak: false,
menu: {
locale: true,
},
title: 'Ant Design Pro',
pwa: false,
iconfontUrl: '',
};
export default proSettings;
这就是在脚手架生成的BasicLayout.jsx的基础上直接改的
比较重要的改动部分我就写在下面了
//topmenu部分
<ProLayout
logo={<img
alt="logo"
style={{ height: '32px' }}
src={logo}
onClick={() => {
handleMenuCollapse(!props.collapsed);
}}
/>}
title="my new ant pro project"
layout="topmenu"
disableMobile
rightContentRender={(rightProps) => <RightContent {...rightProps} {...settings} />}
contentStyle={{ margin: 0 }}
>
menuHeaderRender={false}
headerRender={false}
rightContentRender={false}
试试看,是不是布局好看多了!!!
如果有帮助到你,点个赞吧!!!!