App Bar

App Bar 顯示與目前畫面相關的資訊和操作。

頂端 App Bar 提供與目前畫面相關的內容和操作。它用於品牌宣傳、畫面標題、導覽和操作。

它可以轉換為情境操作列，或用作導覽列。

基本 App bar

帶選單的 App Bar

帶響應式選單的 App Bar

帶搜尋欄位的 App Bar

側邊搜尋列。

帶抽屜式導航的響應式 App Bar

帶主要搜尋欄位的 App Bar

主要搜尋列。

緊湊 (僅限桌面)

醒目

醒目的 App Bar。

底部 App Bar

固定位置

當您將 App Bar 位置設定為 fixed 時，元素的尺寸不會影響頁面的其他部分。這可能會導致部分內容在 App Bar 後方而看不見。以下是 3 種可能的解決方案

1. 您可以使用 position="sticky" 來取代 fixed。
2. 您可以渲染第二個 <Toolbar /> 元件

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}

3. 您可以使用 theme.mixins.toolbar CSS

const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Offset />
    </React.Fragment>
  );
}

捲動

您可以使用 useScrollTrigger() Hook 來回應使用者捲動操作。

隱藏 App Bar

App Bar 在向下捲動時會隱藏，以留下更多空間供閱讀。

抬升 App Bar

App Bar 在捲動時會抬升，以告知使用者不在頁面頂端。

回到頂端

浮動操作按鈕會在捲動時出現，方便回到頁面頂端。

useScrollTrigger([options]) => trigger

參數

1. options (object [選填])

   • options.disableHysteresis (bool [選填]): 預設為 false。停用滯後。在判斷 trigger 值時忽略捲動方向。
   • options.target (Node [選填]): 預設為 window。
   • options.threshold (number [選填]): 預設為 100。當垂直捲動嚴格跨越此閾值 (不包含) 時，變更 trigger 值。

回傳值

trigger: 捲動位置是否符合條件？

範例

import useScrollTrigger from '@mui/material/useScrollTrigger';

function HideOnScroll(props) {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>
      <div>Hello</div>
    </Slide>
  );
}

在深色模式啟用色彩

依照 Material Design 指南，color 屬性在深色模式下對 App Bar 的外觀沒有影響。您可以將 enableColorOnDark 屬性設定為 true 來覆寫此行為。

實驗性 API - Toolpad

儀表板版面配置

來自 @toolpad/core 的 DashboardLayout 元件是儀表板應用程式的起點。它負責處理應用程式版面配置、主題、導覽等等。以下是此元件的使用範例

API

請參閱以下文件，以取得此處提及之元件的所有可用 props 和 classes 的完整參考。

• <AppBar />
• <Menu />
• <Toolbar />