背景幕元件將使用者的焦點縮小到螢幕上的特定元素。
背景幕表示應用程式內部的狀態變更,可用於建立載入器、對話框等。最簡單的形式,背景幕元件會在您的應用程式上新增一個變暗的圖層。
下面的示範展示了一個基本的背景幕,前景有一個環形進度條元件來指示載入狀態。點擊「顯示背景幕」後,您可以點擊頁面上的任何位置來關閉它。
<Button onClick={handleOpen}>Show backdrop</Button> <Backdrop sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })} open={open} onClick={handleClose} > <CircularProgress color="inherit" /> </Backdrop>
請參閱下面的文件,以取得此處提及之元件的所有 props 和 classes 的完整參考。
<Backdrop />
目錄