ReactJS: наложение складной боковой панели на другой компонент.

Question

Я хочу добавить компонент таблицы складной боковой панели, который отображается как наложение поверх другого компонента.

Изображение ниже представляет собой контейнер из 3 частей, каждое с отдельным компонентом.

<Container>
  <ThumbnailContainer/>
  <ImageContainer/>
  <FieldContainer/>
<Container/>

//////////////////////////////////////////////////////////////////////////////////
<ThumbnailContainer/>        <ImageContainer/>                <FieldContainer/>
         |                         |                                   |
         v                         v                                   v

What I want to do is expand a sidebar with a table when the button Line Items is clicked from the FieldContainer. This sidebar must be an overlay displayed over the ImageContainer at the same height(from top) as the trigger button Line Items.

после

Я пробовал использовать Accordion (React Bootstrap), Overlay (React Bootstrap) и Drawer (Material UI), ни один из них не работал должным образом. Какой компонент я могу использовать.

Заранее спасибо!

Любая помощь или советы будут полезны!

Answer 1

Я предполагаю, что:

<FieldContainer>
  <LineItemsContainer>
    <ToggleButton>Line Items</ToggleButton>
    <CollapsibleTable />
  </LineItemsContainer>

  {/* Other elements */
</FieldContainer>

Стиль будет

FieldContainer {
  overflow: visible;
}
LineItemsContainer {
  overflow: visible;
  position: relative;
}

CollapsibleTable {
  position: absolute;
  top: 50%;
  left: 0;
  width: 800px; // Dont need to set width for this element
  transform: translate(-100%, -50%);
}

У меня нет вашего кода для тестирования, но надеюсь, что он поможет вам решить проблему.