底部導航

底部導航列允許在應用程式中的主要目的地之間移動。

底部導航列在螢幕底部顯示三到五個目的地。每個目的地都由一個圖示和一個可選的文字標籤表示。當點擊底部導航圖示時，使用者會被帶到與該圖示相關聯的頂層導航目的地。

當只有三個操作時，請始終顯示圖示和文字標籤。

<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

請參閱以下文件，以獲取此處提及的組件的所有屬性和類別的完整參考。

底部導航

底部導航

沒有標籤的底部導航

固定位置

第三方路由函式庫

API