定制手风琴的设计

Question

我正在尝试设计一个定制的手风琴，用这些花哨的红线连接父母和孩子（见图）。

我在这里使用 Grommet 组件，但总的来说，它的布局只是一堆 div（Box 标签）和一个可折叠的子面板组件（Collapsible 标签）。可以打开子面板并显示更多内容。

经过几次尝试，我连接父母和孩子的方法是用左边框包裹外框，然后使用顶部的白框移除底部的多余边框（堆栈标签第二个示例代码）。连接卡片和左边框的水平线只是放置在子选项卡旁边（在 SubMenuElement 组件内）的样式化 div。

我认为这是一个相当复杂的解决方案（也是因为我需要让白盒做出响应），但我想不出一个更简单的解决方案。 你对我如何改进或重新做红色连接有什么建议吗？ 在此先感谢您的帮助！ 请注意，我知道所有面板在点击时都使用相同的变量

 <MenuButton
    open={openMenu}
    label="PARENT TAB-XYZ"
    onClick={() => {
      const newOpenMenu = !openMenu;
      setOpenMenu(newOpenMenu);
      setOpenSubmenu1(!newOpenMenu ? false : openSubmenu1);
    }}
  />
  <Collapsible open={openMenu}>
    <Box background="antiquewhite" margin={{ left: 'small' }} border={{ side: 'left', size: '2px', color: 'red' }}>
      {Tabs.map(el => {
        return (
          <SubMenuElement
            key={el.title}
            open={openSubmenu1}
            label={el.title}
            onClick={() => setOpenSubmenu1(!openSubmenu1)}
          />
        );
      })}
    </Box>
  </Collapsible>

 <MenuButton
    open={openMenu}
    label="PARENT TAB-POU"
    onClick={() => {
      const newOpenMenu = !openMenu;
      setOpenMenu(newOpenMenu);
      setOpenSubmenu1(!newOpenMenu ? false : openSubmenu1);
    }}
  />
  <Collapsible open={openMenu}>
    <Stack anchor="bottom-left">
      <Box
        background="antiquewhite"
        margin={{ left: 'small' }}
        border={{ side: 'left', size: '2px', color: 'red' }}
      >
        {Tabs.map(el => {
          return (
            <SubMenuElement
              key={el.title}
              open={openSubmenu1}
              label={el.title}
              onClick={() => setOpenSubmenu1(!openSubmenu1)}
            />
          );
        })}
      </Box>
      <Box background="white" height="39px" width="35px"></Box>
    </Stack>
  </Collapsible>
</Box>

);

Answer 1

基于one of my answer for someone who needed a divider，我可以向您提出类似的建议：repro on Stackblitz

您将在第一个链接上找到原始分隔代码。根据您的需要，我对其进行了一些修改，因此只需在内容左侧添加链接。内容包装器上仍然有一个左边框，这对我来说似乎是最简单的解决方案。

你的主文件：

import React, { Component } from "react";
import { render } from "react-dom";
import Divider from "./divider";
import "./style.css";

const App = () => {
  const toggleAccordion = e => {
    e.target.classList.toggle("hidden");
  };

  return (
    <>
      <div className="accordion hidden" onClick={toggleAccordion}>
        accordion header
        <div className="accordion-content-wrapper">
          <Divider>
            <div>Content</div>
          </Divider>
          <Divider>
            <div>Content</div>
          </Divider>
          <Divider>
            <div>Content</div>
          </Divider>
        </div>
      </div>
    </>
  );
};

render(<App />, document.getElementById("root"));

我的手风琴 css（我猜你的组件已经有了这个功能，我只是做了一个最小的复制）：

.accordion.hidden {
  height: 18px;
  overflow: hidden;
}

.accordion-content-wrapper{
  margin-left: 10px;
  border-left: 1px solid black;
}

而对于分隔符，与我原来的答案并没有太大的变化，代码如下：

import React from 'react';

const Divider = ({ children }) => {
  return (
    <div className="divider-component">
      <div className="container">
        <div className="border" />
        <span className="content">{children}</span>
      </div>
    </div>
  );
};

export default Divider;

css:

.divider-component .container{
  display: flex;
  align-items: center;
}

.divider-component .border{
  border-bottom: 1px solid black;
  width: 15px;
}

.divider-component .content {
  width: 100%;
}

即使您必须对其进行编辑以满足您的需要，我们的想法是添加一个 flex 容器，以便您可以在内容左侧添加小链接，与您的内容正确对齐。

Answer 2

对于遇到同样问题的人来说，我最终在一个 div 中使用了两个 50% 高度的弹性框来替换水平线。这允许自动管理响应式调整大小，同时在最后一个项目边框上提供灵活性。

    const SubMenuElement = ({ last, label, open, onClick }: { last?: boolean; label: string; open: any; onClick: any }) => {
  return (
    <Box direction="row">
      <Line last={last} />
      <Box width="100%" margin={{ vertical: 'small' }}>
        <Card background="white" onClick={onClick}>
          ....
        </Card>
      </Box>
    </Box>
  );
};

线在哪里

   const Line = ({ last }: { last?: boolean }) => (
  <Box direction="column" width="20px" flex="grow">
    <Box height="50%" style={{ borderLeft: '1px solid red', borderBottom: '1px solid red' }} />
    <Box height="50%" style={last ? {} : { borderLeft: '1px solid red' }} />
  </Box>
);