Динамическая высота контейнеров для материалов

Вопрос:

У меня возникла проблема, которая сначала я думал, что это общая конфигурация моего приложения и высота, которую я предоставляю своим классам упаковки страниц. Но я сделал простой пример из материала ui tab и, похоже, это естественно для материала ui Tabs Component.

Компонент компонентов пользовательского интерфейса дает контейнеру табуляции та же высота, что и самая большая из всех его контейнеров. Поэтому, если у вас есть одно содержимое вкладки с большим количеством контента в нем, это делает другое содержимое вкладки столь же большим, хотя у них может быть только одно текстовое поле и кнопка в них.

Как я могу сделать так, чтобы высота контейнера настраивалась на содержимое собственной вкладки?

Вот визуальный enter image description here

Вот почему TAB ONE настолько велика, TAB TWO устанавливает высоту enter image description here

Вот вам webpackBin, чтобы увидеть, как работает код и что с ним происходит.

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

Я бы хотел, чтобы контейнер табуляции (тот, у которого зеленая граница) настраивался на содержимое, как в TAB TWO, НО индивидуально.

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

Лучший ответ:

Там запрос слияния, который был принят здесь в lib, который может быть интересен новым методом, называемым updateHeight https://github.com/oliviertassinari/react-swipeable-views/pull/359

<SwipeableViews
  action={actions => {
    this.swipeableActions = actions;
  }}
  animateHeight
>
    <div>{'slide n°1'}</div>
    <div>{'slide n°2'}</div>
    <div>{'slide n°3'}</div>
</SwipeableViews>

Затем:

componentDidUpdate() {
    this.swipeableActions.updateHeight();
}

Ответ №1

Если вы установите высоту на основе текущей видимости текущего элемента, вы сможете решить эту проблему.

пример

.react-swipeable-view-container > div[aria-hidden="false"] {
height: 100%;
}

.react-swipeable-view-container > div[aria-hidden="true"] {
height: 0;
}

Примечание. Это решение можно было бы улучшить, используя лучший селектор, что-то более описательное, как имя класса. Я предполагаю, что это субъективно, но использование селектора атрибутов не является технически неправильным и на самом деле более конкретным, чем просто класс.

Демонстрация: https://www.webpackbin.com/bins / -Ky0z8h7PsdTYOddK3LG

Ответ №2

animateHeight будет анимировать высоту при изменении вкладки. если все вкладки имеют разную высоту, будет отображаться высота соответственно.
Пример:

<SwipeableViews
animateHeight // it will animate height on tab change
>
<div>{'slide 1'}</div>
<div>{'slide 2'}</div>
<div>{'slide 3'}</div>
</SwipeableViews>

Удачного кодирования…!

Оцените статью
TechArks.Ru
Добавить комментарий