幕布

幕布组件缩小用户对屏幕上特定元素的关注。

幕布组件表示应用程序内的状态更改，可用于创建加载器、对话框等。最简单的形式是，幕布组件将在您的应用程序上添加一个变暗的图层。

示例

下面的演示展示了一个基本的幕布，前景中有一个圆形进度条组件，以指示加载状态。点击“显示幕布”后，您可以点击页面上的任何位置来关闭它。

<Button onClick={handleOpen}>Show backdrop</Button>
<Backdrop
  sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
  open={open}
  onClick={handleClose}
>
  <CircularProgress color="inherit" />
</Backdrop>

<Button onClick={handleOpen}>Show backdrop</Button>
<Backdrop
  sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
  open={open}
  onClick={handleClose}
>
  <CircularProgress color="inherit" />
</Backdrop>

按 Enter 键开始编辑

API

请参阅下面的文档，以获得此处提及的组件的所有 props 和 classes 的完整参考。

<Backdrop />