底部导航

底部导航栏允许在应用的主要目的地之间移动。

底部导航栏在屏幕底部显示三到五个目的地。每个目的地都由一个图标和一个可选的文本标签表示。当点击底部导航图标时，用户将被带到与该图标关联的顶级导航目的地。

当只有三个操作时，始终显示图标和文本标签。

<BottomNavigation
  showLabels
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
>
  <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
  <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
  <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>

<BottomNavigation
  showLabels
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
>
  <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
  <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
  <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>

按 Enter 键开始编辑

如果有四个或五个操作，则仅将非活动视图显示为图标。

固定定位

此演示保持底部导航固定在底部，无论屏幕上的内容量如何。

第三方路由库

一个常见的用例是在客户端执行导航，而无需 HTTP 往返服务器。 BottomNavigationAction 组件提供了 component 属性来处理此用例。这里有更详细的指南。

API

请参阅下面的文档，以获得此处提及的组件的所有可用 props 和 classes 的完整参考。

底部导航

底部导航

无标签的底部导航

固定定位

第三方路由库

API