react自定义prolayout的展开收起

最新推荐文章于 2024-10-09 21:26:04 发布

莲娃

最新推荐文章于 2024-10-09 21:26:04 发布

阅读量259

点赞数 2

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/mlyjqx/article/details/142768347

版权

关于prolayout组件：ProLayout高级布局🏆 让中后台开发更简单包含 table form 等多个组件。https://procomponents.ant.design/components/layout

// tsx文件
import ProLayout from '@ant-design/pro-layout';
...
const [collapsed,setCollapsed]=useState(false);

...
return (
...
   <ProLayout
        collapsed={collapsed}
        collapsedButtonRender={()=>{
          return(
            <div
            className={collapsed ? 'collapsed' : 'expanded'}
              onClick={()=> setCollapsed(!collapsed)}
              style={{
                cursor: 'pointer',
                fontSize:'15px',
                width:'20px',
              }}
            >  
            {collapsed?<RightCircleTwoTone
            style={{
              fontSize:'25px',
            }} />:<LeftCircleTwoTone 
            style={{
              fontSize:'25px',
            }}/>}
            </div>
          );
        }}
...>
</ProLayout>



//less文件

.expanded {
  position: fixed;
    top: 50%;
    left: 245px;
    font-size:20px
}

.collapsed {
  position: fixed;
    top: 50%;
    left: 50px;
    font-size:20px
}

最终实现的样式如图：

收起：