Bottom Navigation (Untere Navigation)

Die unteren Navigationsleisten ermöglichen die Bewegung zwischen primären Zielen in einer App.

Die untere Navigationsleiste zeigt drei bis fünf Ziele am unteren Bildschirmrand an. Jedes Ziel wird durch ein Symbol und eine optionale Textbezeichnung dargestellt. Wenn Sie auf ein unteres Navigationssymbol tippen, wird der Benutzer zum Navigationsziel der obersten Ebene geführt, das diesem Symbol zugeordnet ist.

Bottom Navigation (Untere Navigation)

Wenn es nur 3 Aktionen gibt, werden immer sowohl Symbole als auch Beschriftungen angezeigt.

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

Untere Navigation ohne Beschriftung

Bei 4 oder 5 Aktionen werden inaktive Ansichten nur als Symbole angezeigt.

<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 (Untere Navigation)

Bottom Navigation (Untere Navigation)

Untere Navigation ohne Beschriftung

API