React js 材质 ui Accordion 可拖动调整大小

如何解决React js 材质 ui Accordion 可拖动调整大小

正如您从图片中看到的，我有两台手风琴，一台在左侧 (30%)，另一台在右侧 (70%)，当我单击按钮时，右侧的一个消失，左侧的一个变成 (100%)。

我想做的是可以通过可拖动的移动来调整左右两个元素的大小。

链接：codesandbox

代码：

import React,{ useState } from "react";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import {
  makeStyles,Accordion,AccordionSummary,AccordionDetails,Tooltip
} from "@material-ui/core";
import { Visibility,VisibilityOff } from "@material-ui/icons";
const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%"
  },heading: {
    fontSize: theme.typography.pxToRem(15),fontWeight: theme.typography.fontWeightRegular
  }
}));

export default function SimpleAccordion() {
  const classes = useStyles();
  const [showPreview,setShowPreview] = useState(true);
  const handleChangeCheck = () => {
    setShowPreview((prev) => !prev);
  };
  return (
    <div className={classes.root}>
      <Tooltip title={showPreview ? "Show" : "Hide"} placement="bottom" arrow>
        {showPreview ? (
          <Visibility
            onClick={handleChangeCheck}
            style={{ cursor: "pointer" }}
          />
        ) : (
          <VisibilityOff
            onClick={handleChangeCheck}
            style={{ cursor: "pointer" }}
          />
        )}
      </Tooltip>
      <div
        style={{
          display: "flex"
        }}
      >
        <div
          style={{
            width: showPreview ? "30%" : "100%",minHeight: "500px",marginTop: 7,transition: "width 1s,height 4s"
          }}
        >
          <Accordion defaultExpanded>
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls="panel1a-content"
              id="panel1a-header"
            >
              <Typography className={classes.heading}>Accordion 1</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>
                Lorem ipsum dolor sit amet,consectetur adipiscing elit.
                Suspendisse malesuada lacus ex,sit amet blandit leo lobortis
                eget.
              </Typography>
            </AccordionDetails>
          </Accordion>
        </div>
        {showPreview && (
          <div
            style={{
              width: "70%",height: "100vh",float: "right",marginLeft: 5
            }}
          >
            <Accordion defaultExpanded>
              <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel2a-content"
                id="panel2a-header"
              >
                <Typography className={classes.heading}>Accordion 2</Typography>
              </AccordionSummary>
              <AccordionDetails>
                <Typography>
                  Lorem ipsum dolor sit amet,consectetur adipiscing elit.
                  Suspendisse malesuada lacus ex,sit amet blandit leo lobortis
                  eget.
                </Typography>
              </AccordionDetails>
            </Accordion>
          </div>
        )}
      </div>
    </div>
  );
}

解决方法

在这里我找到了一些可以帮助您实现目标的软件包

react-panelgroup

这是我为您制作的关于上述包的示例 https://codesandbox.io/s/resizable-panels-for-react-forked-0o7p4?file=/src/App.js:348-364

第一次

import PanelGroup from "react-panelgroup";

然后像这样使用

  <PanelGroup direction="row" borderColor="grey">
          <Accordion classes={classes} />
          <Accordion classes={classes} />
          <Accordion classes={classes} />
        </PanelGroup>

您可以自定义每个元素的最小宽度和高度

<PanelGroup
  panelWidths={[
    { size: 100,minSize: 50,resize: 'dynamic' },{ minSize: 100,resize: 'stretch' },{ size: 100,resize: 'dynamic' }
  ]}
>

还要检查

react-reflex 文档 https://leefsmp.github.io/Re-Flex/index.html