0

私は、親と子を結ぶこれらのファンシーな赤い線でカスタム アコーディオンを設計しようとしています (写真を参照)。

ここに画像の説明を入力

ここでは Grommet コンポーネントを使用していますが、要約すると、レイアウトは単なる div の集まり (Box タグ) と、子用の折りたたみ可能なパネル コンポーネント (Collapsible タグ) です。子パネルを開いて、より多くのコンテンツを表示できます。

数回試行した後、親と子を接続するために私が行ったことは、外側のボックスを左の境界線で包み、その上にある白いボックスを使用して下部の余分な境界線を削除することです (2 番目の例の Stack タグコード）。カードと左枠を結ぶ水平線は、Child タブの横 ( 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>

);

4

2 に答える 2

1

仕切りが必要な人への私の回答の1つに基づいて、そのようなものを提案できます：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%;
}

ニーズに合わせて編集する必要がある場合でも、コンテンツに合わせてコンテンツの左側に小さなリンクを追加できるように、フレックス コンテナーを追加することをお勧めします。

于 2020-05-11T16:06:01.553 に答える