React MUI — согласованная высота содержимого вкладки
Я так понимаю, что в идеале должно быть вверху страницы. Однако предположим, что они расположены в середине страницы. При переходе с вкладки с большим количеством содержимого на вкладку с небольшим содержимым прокручиваемая область исчезает. Есть ли способ сохранить пустое пространство?
https://codesandbox.io/s/labtabs-material-demo-forked-y39i2g?file=/demo.tsx
Вот пример песочницы кода.
Шаг 1 прокрутите вниз до вкладок.
Шаг 2 прокрутите содержимое вкладки 1 вниз (оставьте вкладки видимыми)
Шаг 3. Нажмите вкладку 2 (мышь больше не зависает над вкладками, потому что содержимое вертикальной прокрутки исчезает)
Обновлено: я могу изменить минимальную высоту корневого элемента div на то, что мне нужно жестко закодировать. Я чувствую, что это взломано, хотя и не динамично для самой высокой вкладки
Ответы 1
Вы можете установить minHeightstyle на tab2, а tab3 на высоту tab1, используя useRef
const tabRef = React.useRef<HTMLDivElement>(null)
const [tabHeight, setTabHeight] = React.useState(0);
React.useEffect(() => {
setTabHeight(tabRef.current.clientHeight)
}, [tabRef]);
<TabPanel value = "1" ref = {tabRef}></TabPanel>
<TabPanel value = "2" sx = {{ minHeight: tabHeight }}></TabPanel>
<TabPanel value = "3" sx = {{ minHeight: tabHeight }}></TabPanel>
Демо:
https://codesandbox.io/s/labtabs-material-demo-forked-40kpwc?file=/demo.tsx