ant design pro v5 自定义侧边栏收缩按钮位置

最新推荐文章于 2024-08-21 04:32:20 发布

阿舒带你学编程

最新推荐文章于 2024-08-21 04:32:20 发布

阅读量1.5k

点赞数 1

分类专栏：前端 html 面试文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/m0_55613022/article/details/123154310

版权

本文介绍了在Ant Design Pro V5中如何自定义侧边栏的折叠按钮位置。通过修改HeaderContent组件和app.tsx的设置，实现按钮的定制。文章提供了一步步的操作指南，并附带了相关代码示例。最后，作者分享了前端开发的学习资源和建议。

摘要由CSDN通过智能技术生成

ant design pro v5 自定义侧边栏收缩按钮位置

图：
在这里插入图片描述

1.升级ant design pro v5以后layout隐藏，相关配置放到了app.tsx
layout 的配置代码如下：

export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    waterMarkProps: {
      content: initialState?.currentUser?.name,
    },
    footerRender: () => <Footer />,
    onPageChange: () => {
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!initialState?.currentUser && location.pathname !== loginPath) {
        history.push(loginPath);
      }
    },
    links: isDev
      ? [
          <Link to="/umi/plugin/openapi" target="_blank">
            <LinkOutlined />
            <span>OpenAPI 文档</span>
          </Link>,
          <Link to="/~docs">
            <BookOutlined />
            <span>业务组件文档</span>
          </Link>,
        ]
      : [],
    menuHeaderRender: undefined,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    ...initialState?.settings,
  };
};

通过官方文档
在这里插入图片描述
我们主要关注红框里面的参数。