Question

我使用库 react-pro-sidebar 创建了带有图标的可折叠侧边栏，我的问题是如何在右侧（可折叠侧边栏旁边 ) 并同时使其具有响应性。

main

import React, { useState } from 'react';
import './styles/dashboard.css';
import 'react-pro-sidebar/dist/css/styles.css';
import { BuildHeaderDashboard, BuildTopNavigationBar, BuildSideBar } from './Dashboard';

export const CompanyPortal = () =>  {
    const [toggleCollapse, setToggleCollapse] = useState(false);

    const handleToggleCollapse = (event) => {
        setToggleCollapse(!toggleCollapse);

    }


    return (
        <div>
            <BuildSideBar isToggleCollapse={toggleCollapse} />
            <main style={toggleCollapse ? { left: '3.25%' } : { left: '16%' } }>testfdsafdasfd afd asfd asfd haskf hdashf kjdsahfk jdsahkf hdashf dsahf dshaf hdask fhjdasj</main>
        </div>
    );
}

export default CompanyPortal;

main {
    position: relative;
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.pro-sidebar {
    position: absolute !important;
}

快速 GIF 示例：https://gyazo.com/0c042d72dda56defadb5192c10df73af

正如您在我上传的 GIF 中看到的那样，文本似乎没有响应，并且在将浏览器屏幕向下拖动时，它往往会在左侧溢出。有谁知道如何实现这一目标？

Answer 1

您好，请尝试以下解决方案

<!DOCTYPE html>
<html>
    <style>
    main {
        position: relative;
        padding: 24px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
        
    </style>
    <body>
        <div style="display:flex">
            <div style="width: 150px;height: 100vh; background-color: grey;">Left Side</div>
            <main>estfdsafdasfd afd asfd asfd haskf hdashf kjdsahfk jdsahkf hdashf dsahf dshaf hdask fhjdas</main>
        </div>

    </body>
</html>

ReactJs 侧边栏右侧内容

1 个答案: