Question

我有一个问题，起初我认为这是我的应用程序的一般配置和我给页面包装类的高度。但是我做了一个简单的开箱即用的材料ui tab示例，看起来这对于材料ui Tabs Component来说是很自然的。

材质UI标签组件为其标签容器提供相同的高度，即该高度是其所有容器中最大的。因此，如果您有一个包含大量内容的标签内容，它会使其他标签内容同样大，即使它们可能只有一个文本字段和一个按钮。

如何才能使容器的高度调整为自己标签的内容？

这是一个视觉

这就是为什么TAB ONE如此之大，TAB TWO正在设定高度

Here is a webpackBin让你看到代码正常工作并且弄乱它。

我到目前为止所做的一件事是设置一个明确的高度和溢出，但我不想这样做，因为它创建了一个双滚动条（一个在标签容器中，一个在体内除此之外，它看起来很不错。

如果标签容器（带有绿色边框的容器）调整为内容，就像在TAB TWO， BUT 中一样，我希望如此。

提前致谢！

Answer 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

Answer 2

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();
}

Answer 3

animateHeight将在更改制表符时设置高度的动画。如果所有标签页的高度都不同，则会相应地显示高度。
示例：

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

快乐编码...！

材料ui标签容器的动态高度

3 个答案:

实施例