MUI BottomNavigation 默认不粘

Posted 2023-02-22

【中文标题】MUI BottomNavigation 默认不粘

【英文标题】：MUI BottomNavigation is not sticky by default

【发布时间】：2018-08-15 04:53:24

【问题描述】：

如何使BottomNavigation 组件具有粘性？为什么默认不粘？

【问题讨论】：

你可以看看Snackbar的实现。

Snackbar 是一个开始，但AppBar 的实现可能会产生最接近所需行为的结果。

【参考方案1】：

您可以使用以下 CSS 将 BottomNavigation 固定在屏幕底部：

const styles = 
  stickToBottom: 
    width: '100%',
    position: 'fixed',
    bottom: 0,
  ,
;

然后将其应用到您的 BottomNavigation 组件：

<BottomNavigation className=classes.stickToBottom>

您应该知道position: 'fixed' 会导致底部导航组件遮盖您的内容（类似地，如果您不使用边距，粘贴在屏幕顶部的AppBar 也会遮盖内容） .您需要提供marginBottom 或其他类型的填充，以确保您的任何内容都不会被隐藏。

您还可以尝试使用其他一些position 选项，例如sticky 或absolute。但是，根据我的经验，fixed 是最适合您需求的选项。

【讨论】：

值得注意的是：Appbar 是响应式大小的，因此需要针对不同的视口大小调整此填充。这可以使用 Toolbar mixin 来完成。

@KenGregory Toolbar mixin 是一个很好的解决方案，可以将填充调整为AppBar 大小。不幸的是，由于这个问题中的填充需要匹配BottomNavigation 的大小，所以它不适用于这种情况。

你提到了 Appbar，我提到了工具栏的 mixin。

@KenGregory Right...这只是关于BottomNavigation 组件的问题，所以我想明确的是Toolbar mixin 不是填充@987654337 的合适解决方案@组件。

@JulesDupont 是的，最后我们将使用 css 使其粘在底部。那么我的第二个问题呢，只是想知道，它是否应该默认粘在底部？因为它的名字已经是 BottomNavigation XD 或者是否有任何情况或有一个指导方针，该组件不必总是在底部使用粘性？

【参考方案2】：

对于需要在AppBar 中使用它的人，混合不会导致任何填充冲突。

  <AppBar position="fixed" color="primary" style=top: "auto", bottom: 0>
    <BottomNavigation value=0 onChange=(event, newValue) => >
      <BottomNavigationAction label="One" icon=<LocationOnIcon/>/>
      <BottomNavigationAction label="Two" icon=<LocationOnIcon/>/>
    </BottomNavigation>
  </AppBar>

【讨论】：

这不会产生语义 html。 AppBar 将在页脚周围呈现一个<header> 标签。

【参考方案3】：

您可以通过AppBar 的component 属性更改<header>。

【参考方案4】：

您可以将BottomNavigation 的位置设置为fixed，将bottom 设置为0，使其位于视口的底部。

<BottomNavigation sx= position: 'fixed', bottom: 0, width: 1.0 

但是fixed 元素被从正常的文档流中取出，并且可能与正文的内容重叠。解决它的一种方法是根据BottomNavigation的高度设置内容的paddingBottom（目前来自源is 56px）

<Box paddingBottom='56px'>
  <Content />
</Box>
<BottomNavigation sx= position: 'fixed', bottom: 0, width: 1.0 >
  <BottomNavigationAction label="Recents" icon=<RestoreIcon /> />
  <BottomNavigationAction label="Favorites" icon=<FavoriteIcon /> />
  <BottomNavigationAction label="Archive" icon=<ArchiveIcon /> />
</BottomNavigation>

参考

https://mui.com/components/bottom-navigation/#fixed-positioning