材质 ui 选项卡容器的动态高度

Posted 2023-03-06

【中文标题】材质 ui 选项卡容器的动态高度

【英文标题】：Dynamic height for material ui tab containers

【发布时间】：2018-04-16 04:38:18

【问题描述】：

我遇到了一个问题，起初我认为这是我的应用程序的一般配置以及我为页面包装类提供的高度。但我制作了一个简单的开箱即用材质 ui 选项卡示例，看起来这对于材质 ui 选项卡组件来说是很自然的。

Material UI 选项卡组件赋予其选项卡容器相同的高度，该高度是其所有容器中最大的。因此，如果您的一个选项卡内容中有很多内容，它会使其他选项卡内容同样大，即使它们可能只有一个文本字段和一个按钮。

我怎样才能让容器的高度适应它自己标签的内容？

这是一个视觉效果

这就是为什么 TAB ONE 这么大，TAB TWO 设置高度

Here is a webpackBin 让您看到代码工作并搞砸它。

到目前为止，我所做的一个技巧是设置一个确定的高度和溢出，但我不想这样做，因为它会创建一个双滚动条（一个在选项卡容器中，一个在正文中）此外，它是看起来像马车。

如果选项卡容器（带有绿色边框的那个）可以像在 TAB 2 中那样单独调整内容，BUT，我希望它。

提前致谢！

【问题讨论】：

WebpackBin 总是需要永远加载吗？无论如何，看看这个版本，我的修改应该很明显 - 但如果您有任何问题，请随时提问：webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG

哈哈。是的，反应库相当大。我去看看

哇！就这么简单！我很惭愧 :( 哈哈哈。发布答案。你值得称赞，另外我在他们的 github 中看到了几个材料 ui PRs 并且没有解决方案。我相信这会对其他人有所帮助

当然 - 很乐意...

【参考方案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

【讨论】：

我认为目标选择器非常好，因为它是由 ReactDOM 生成的，这可能永远不会改变。 MaterialUI4 可能不同。

好的，完美，那么它应该是可扩展的

正是我想要的

这个非 javascript 解决方案是最好的。好答案！

【参考方案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();

【讨论】：

有趣。我会调查一下这个问题。昨天刚好这个问题又回到了我的办公桌上，所以你来的很及时。谢谢。我会更新

这是一个更好的解决方案和公认的答案

嘿，伙计。当标签内的项目隐藏并在显示时更新高度时，您是否测试过？似乎 updateHeight 锁定了加载的高度，并且隐藏的项目在我更改选项卡之前不会显示。然后 updateHeight 触发并更新新显示的项目的高度。令人困惑，我知道。如果您需要屏幕截图，我们可以进行聊天。我可以使用你的帮助，因为你是唯一回答这个问题的人

如果我理解您的意思，您的内容取决于用户操作？所以我认为当您在选项卡中显示您的内容时，您需要调用this.swipeableActions.updateHeight();，而不仅仅是在全局组件的componentDidUpdate 方法中。如果我不太明白，您可以发布一个 codepen 示例或类似的东西吗？

你懂的。我在给你发消息后不久就发现了这一点，它可以工作，但它会弄乱其他也会改变高度的事情。我决定从应用程序中删除可滑动的视图。不值得麻烦。它唯一的价值就是滑动动画

【参考方案3】：

animateHeight 将在标签更改时为高度设置动画。如果所有选项卡的高度不同，它将相应地显示高度。 示例：

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

编码愉快...！