跳转到内容

Bottom Navigation 底部导航栏

使用底部导航栏,您可以在应用程序的主要导航项之间跳转。

底部导航栏(Bottom navigation)在屏幕下方显示三到五个导航项。 每一个导航项都由一个图标和一个可选文本标签表示。 当点击底部导航图标时,用户被切换到该图标关联的目标页面顶部。

Bottom Navigation 底部导航栏

当只有三个导航项时,导航栏会始终显示图标和文本标签。

<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>

无标签的底部导航栏

如果有四个五个导航项,那些未被选中的导航项会以图标的样式显示。

固定位置

无论屏幕上有多少内容,该演示的内容都会将底部导航固定在底部。

第三方路由库

一种常见的用例是仅在客户端上执行导航,而无需通过 HTTP 往返服务器。 针对这种用法,Link 组件了提供 component 属性来适配它。 这里是 更详细的指南