Backdrop

el componente Backdrop centra la atención del usuario en un elemento concreto de la pantalla.

El Backdrop señala un cambio de estado dentro de la aplicación y puede ser usado para crear cargadores, diálogos y más. En su forma más simple, el componente Backdrop añadirá una capa atenuada sobre su aplicación.

Ejemplo

La siguiente demostración muestra un telón de fondo básico con un componente de progreso circular en primer plano para indicar el estado de carga. Después de hacer clic en Mostrar backdrop, puede hacer click en cualquier parte de la página para cerrarla.

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

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

Press Enter to start editing

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

<Backdrop />