Реакция разделенной панели показывается над другими компонентами при использовании `display: flex`
Для моего нового проекта реакции мне нужна разделенная панель.
Я использую для этого https://github.com/tomkp/react-split-pane.
После того, как я все реализовал, я хотел, чтобы мой заголовок выше выглядел так.
Поэтому я добавил заголовок к своему корневому компоненту.
render() {
return (
<div className='App'>
<h1>This is my heading</h1>
<SplitPane split='vertical' minSize = {50} defaultSize = {100}>
<div>split 1</div>
<div>split 2</div>
</SplitPane>
</div>
);
}
}
Вот так, без какого-либо css, это дало мне почти правильный результат. И единственная проблема здесь заключается в том, что разделенная панель, кажется, принимает 100vh за свою высоту, и поэтому общее приложение больше. Что дает мне красивую полосу прокрутки, которую я не хочу.
Моя следующая идея заключалась в том, чтобы просто поместить все в сетку css (я знаю, что это, вероятно, не лучший вариант использования, но, по крайней мере, я бы знал, как решить проблему с размером), а затем изменить ее размер, используя относительные единицы.
CSS, который я добавил к своему основному компоненту, это.
.App {
display: grid;
grid-template-rows: auto 1fr;
}
Это изменение не дало мне того эффекта, которого я хотел. Вместо того, чтобы аккуратно складывать все, он каким-то образом поместил разделенную панель над заголовком.
Я подумал, что сделал что-то не так с сеткой css, поэтому применил display: flex;, что вызвало ту же проблему.
Я действительно не знаю, в чем здесь проблема, поэтому мне любопытно, сталкивался ли кто-нибудь с такой проблемой раньше.
Ответы 1
Добавьте это в свой селектор .App:
.App {
position: relative;
}
Кроме того, если вы хотите, чтобы ширина обеих панелей была ровно наполовину, измените компонент SplitPane на это:
<SplitPane split = "vertical" minSize = "50%" defaultSize = "50%">
К сожалению, существует проблема, из-за которой размеры панелей перестают изменяться, и приложение выходит за границы при очень малой ширине.
In response to:
SplitPane shrinking down to a size where it's not really usable even though the height is set to 100%.
Содержимое внутри SplitPane не видно/не используется, потому что:
SplitPane имеет свойство
height: 100%. Это означает, что высота SplitPane составляет 100% от высоты его родителя.SplitPane имеет свойство
overflow: hidden. Это скроет любой контент, который превышает размеры SplitPane.Так как
SplitPane's height = .App's height = h1's heightи высотаh1составляла около 30-40 пикселей, высота SplitPane также была около 30-40 пикселей. Это означало, что любой дочерний элемент SplitPane с высотой более 30-40 пикселей обрезал свое содержимое.- SplitPane, скорее всего, вычисляет, насколько нужно сместиться от вершины, вычисляя общую высоту своих предыдущих братьев и сестер.
Итак, теперь мы знаем, что CSS-свойства SplitPane выглядят так:
{
position: absolute;
top: 0 || /* auto-calculated by SplitPane */;
left: 0 || /* auto-calculated by SplitPane */;
overflow: hidden;
height: 100%; /* total height of preceding siblings */
...
}
Следующими вашими шагами будет принятие решения о том, как вы хотите, чтобы ваше приложение выглядело и функционировало, и принятие решений на основе вашего решения. Начать:
Вы хотите, чтобы панель навигации была закреплена в верхней части области просмотра?
Как бы вы хотели обрабатывать избыточное содержимое внутри панелей, если вам не нужна полоса прокрутки?
Подходит ли ваш сайт для мобильных устройств? Если да, то как бы вы хотели отображать разделенные панели на маленьких экранах?
In response to:
How do I change to
position: relativewhile assigning all space below the header to the split view?
Некоторыми возможными решениями могут быть использование Javascript или, возможно, Sass/SCSS/Less, чтобы установить общую высоту SplitPane, равную высоте области просмотра за вычетом того, насколько SplitPane был смещен сверху.
Трудно дать окончательный ответ, потому что я не знаю, как вы хотите обрабатывать контент, размер которого превышает 100vh, без полосы прокрутки.
In response to:
[I] can't use
display: gridorflexsince it would still overwrite the header.
Flexbox/Grid не работает, потому что SplitPane не живет в том же пространстве, что и его братья и сестры. Вам придется перезаписать свойство position SplitPane на static.
.App {
display: flex; /* Introduce Flexbox */
/* This is added to change the orientation of elements from
left-right (row) to top-bottom (column). */
flex-direction: column;
}
<SplitPane ... style = {{ position: "static" }}>
Next steps
Единственное, что я могу порекомендовать на данном этапе, это добавить height: 100vh и width: 100vw к .App.
извините, что беспокою вас, но я только что нашел здесь еще одну проблему. Теперь SplitView сжимается до размера, при котором его нельзя использовать, даже если размер установлен на 100%. Как изменить на position: relative при назначении всего пространства под заголовком раздельному представлению? Нельзя использовать display: grid или flex, так как это все равно перезапишет заголовок. codeandbox.io/s/eager-banzai-1lmjn
Спасибо за подробное объяснение. Я решил, что, вероятно, откажусь от разделенной панели и просто буду использовать 2 компонента рядом друг с другом. Несмотря на то, что разделенная панель является хорошей концепцией, я не понимаю многих моментов, и мне приходится тратить свои ресурсы на другие аспекты приложения. Все равно спасибо за объяснение.
Спасибо большое. Это решило мою проблему. Еще одна проблема, с которой я столкнулся, заключалась в том, что я вручную установил для всего тела значение 100vh, что, по-видимому, не работает с моим электронным приложением :D. Спасибо.