【问题标题】:Material-ui Tabs Left Alignment IssueMaterial-ui 选项卡左对齐问题
【发布时间】:2017-07-26 06:33:38
【问题描述】:

material-ui 的当前版本不支持组件中的左对齐选项卡。我看到了一个解决方法 https://github.com/callemall/material-ui/issues/4420

这是我的相同实现 https://www.webpackbin.com/bins/-KpxVgwKOLPfM8CFcu5-

但选择了第一个选项卡时,标签栏扭曲,高度高于所需的高度。

【问题讨论】:

  • 这是由于浏览器默认的 h2 标签页边距顶部,但我很惊讶为什么它只发生在第一个标签上而不发生在其他标签上
  • 我想在标签结束后有一个容器边距。
  • 我更新了webpack-bin ^^
  • 您应该在问题中添加这些 cmets(帖子)

标签: css reactjs material-ui


【解决方案1】:

左对齐

选项卡组件的初始迁移已合并到下一个分支。 该功能已实现,现在是默认行为。 感谢您提供这些详细信息。

这是v1-beta 中支持的feature

修复高度问题

Tab Bar 扭曲且高度超出预期。

headline: {{ marginTop: '0px' }}

见:comment

使用填充

我想在标签结束后有一个容器边距。

标签结构对我来说真的很奇怪,
由于某种原因你不能使用边距,尝试使用填充代替:

contentContainerStyle={{ paddingTop:'50px' }}

设置宽度

不要在tabItemContainerStyle 中设置宽度,而是使用包装器:

<div calssName='wrapper' style={{ width: '500px' }} /> 
    <Tabs {...}/>
</div>

Example (webpackbin)

【讨论】:

    猜你喜欢
    • 2019-11-30
    • 2015-02-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-08-01
    • 1970-01-01
    • 2019-04-16
    • 1970-01-01
    相关资源
    最近更新 更多