天天看點

AntD自定義展開收縮的button 及 自定義展開收縮時對應的logo圖檔

需求如圖:

AntD自定義展開收縮的button 及 自定義展開收縮時對應的logo圖檔
AntD自定義展開收縮的button 及 自定義展開收縮時對應的logo圖檔

代碼:

這裡用到的是Prolayout元件

AntD自定義展開收縮的button 及 自定義展開收縮時對應的logo圖檔
logo={collapsed ? logoMini : logo}
        collapsed={collapsed}
        collapsedButtonRender={false}
        headerContentRender={() => {
          return (
            <div
              onClick={() => setCollapsed(!collapsed)}
              style={{
                cursor: 'pointer',
                fontSize: '16px',
                width: '16px',
              }}
            >
              {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </div>
          );
        }}