React-разделенная панель: левая панель всегда начинается с левого поля страницы

#javascript #next.js

Вопрос:

У меня есть фиксированная боковая панель. Но правая панель должна быть разделена. Для этого я использовал приведенный ниже сегмент кода. Но левая часть разделителя всегда прилипает к левому краю страницы (т. е. левое поле боковой панели и поле разделенной левой панели находятся в одном и том же положении). Я хочу установить левое поле левой панели там, где находится правое поле боковой панели.

     <div className="flex">
      <Sidebar />
      <SplitPane
        split="vertical"
        minSize={256}
        defaultSize={500}
        onChange={(size) => persistSplitterPos(size)}
      >
        <div className="w-full h-page">gggg</div>
        <div className="w-full h-page">sss</div>
      </SplitPane>
    </div>

Боковая панель.jsx:

 <div class="w-64">
</div>

Я попробовал поэкспериментировать с minSize и. maxSize Но я не смог получить желаемого результата.

Вот ссылка на codesandbox.

Ответ №1:

<SplitPane> то, что вы используете, позиционируется абсолютно, left свойства жесткого кодирования и right стиля равны 0 пикселей, поэтому по умолчанию оно прикрепляется к левому и правому краю страницы и занимает всю ширину. Чтобы получить больший контроль над тем, где прикрепляется разделительная панель, вы должны поместить ее в относительно расположенный родительский элемент, тогда абсолютное расположение панели будет работать в контексте этого родительского элемента, а не всей страницы:

 /*styles.css*/
.App {
      font-family: sans-serif;
      text-align: center;
      display: flex;
}

/*App.js*/
<div className="App">
    <div
        style={{
            width: 256,
            backgroundColor: "#d5f5cf"
        }}
    >
        Sidebar
    </div>
    <div
        style={{
            position: "relative",
            width: "100%"
        }}
    >
        <SplitPane>
            <div style={{ backgroundColor: "#d5f5cf" }}>Left-Pane</div>
            <div style={{ backgroundColor: "#f4edba" }}>Right-Pane</div>
        </SplitPane>
    </div>
</div>