React js材料ui手风琴可拖动调整大小

Question

从图片中可以看出，我有两个手风琴，一个在左侧 (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",
              marginTop: 7,
              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>
  );
}

Answer 1

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

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, minSize: 50, resize: 'dynamic' }
  ]}
>

还要检查

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