【问题标题】:Fixing tab bar in material-ui修复material-ui中的标签栏
【发布时间】:2016-01-18 01:50:21
【问题描述】:

我正在尝试在屏幕底部固定选项卡组件。我试过了

<Tabs
  contentContainerStyle={{position: "fixed"}}
>
</Tabs>

甚至style={{position:"fixed"}}

如何修复底部的选项卡?

【问题讨论】:

  • 我猜你需要 {{position:fixed;bottom:0px;}}
  • 对不起,我想澄清一下:position:fixed 不能修复标签。
  • 你试过在 div 中包装标签吗? &lt;div style={{ position: fixed; bottom: 0 }}&gt;&lt;Tabs /&gt;&lt;/div&gt;

标签: reactjs material-ui


【解决方案1】:

这对我有用

<div style={{position: "fixed", bottom:"0", width:"100%"}}>
 <Tabs>
   <Tab icon={<ActionFlightTakeoff />} />
     <Tab icon={<ActionFlightTakeoff />} />
     <Tab icon={<ActionFlightTakeoff />} />
   </Tabs>
</div>

【讨论】:

  • 以下设置在视觉上可以工作,但是事件侦听器和活动选项卡指示器意外呈现无用。
【解决方案2】:

我像这样使用 tabItemContainerStyle:

<code>
    <Tabs tabItemContainerStyle={{position: "fixed", bottom:"0"}}>
    </Tabs>
</code>

【讨论】:

  • 请解释一下,这也是如何解决的。
  • 虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。
猜你喜欢
  • 2021-01-16
  • 2021-09-27
  • 2019-07-19
  • 1970-01-01
  • 2010-09-26
  • 2021-01-09
  • 2021-02-18
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多