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>

Bottom Navigation 底部导航栏

底部导航栏

无标签的底部导航栏

API