跳转到内容

Bottom Navigation 底部导航栏

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

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

底部导航栏

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

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

无标签的底部导航栏

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

<BottomNavigation value={value} onChange={handleChange} className={classes.root}>
  <BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />} />
  <BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} />
  <BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon />} />
  <BottomNavigationAction label="Folder" value="folder" icon={<FolderIcon />} />
</BottomNavigation>