Перейти к контенту
Редактировать эту страницу

Backdrop

Затемнение предназначено для акцентирования внимания пользователя на определенном элементе интерфейса.

The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs, and more. Проще говоря, затемнение добавляет затемнённый слой поверх вашего приложения.

Пример

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

Unstyled

The backdrop also comes with the unstyled package. It's ideal for doing heavy customizations and minimizing bundle size.

import Backdrop from '@material-ui/unstyled/Backdrop';

API