Dialog

Los diálogos informan a los usuarios sobre una tarea y pueden contener información importante, requerir decisiones, o involucrar múltiples tareas.

Un Diálogoes una clase de ventana modal que aparece encima del contenido para proveer información importante o pedir que el usuario tome una decision. Los diálogos deshabilitan todas las funcciones de la aplicación cuando aparecen, y se quedan visibles hasta que se confirman, se descartan, o se toma alguna acción necesaria.

Los diálogos están diseñados para interrumpir el usuario, por eso deben usarse sólo cuando sean necesarios.

Diálogos simples

Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).

Mecánica táctil:

Elegir una opción confirma inmediatamente la opción y cierra el menú
Tocar fuera del diálogo, o presionar Atrás, cancela la acción y cierra el cuadro de diálogo

Selected: user02@gmail.com

<Typography variant="subtitle1" component="div">
  Selected: {selectedValue}
</Typography>
<br />
<Button variant="outlined" onClick={handleClickOpen}>
  Open simple dialog
</Button>
<SimpleDialog
  selectedValue={selectedValue}
  open={open}
  onClose={handleClose}
/>

Alertas

Las alertas son interrupciones urgentes, que requieren reconocimiento, que informan al usuario sobre una situación.

La mayoría de las alertas no necesitan títulos. Resumen una decisión en una o dos frase, ya sea por:

Hacer una pregunta (por ejemplo, "¿Eliminar esta conversación?")
Hacer una declaración relacionada con los botones de acción

Use title bar alerts only for high-risk situations, such as the potential loss of connectivity. Users should be able to understand the choices based on the title and button text alone.

Si se necesita un título:

Use una pregunta o afirmación clara con una explicación en el área de contenido, tal como "¿Borrar el almacenamiento USB?".
Avoid apologies, ambiguity, or questions, such as "Warning!" or "Are you sure?"

Transiciones

También puede intercambiar la transición, el siguiente ejemplo utiliza Slide.

Diálogos de formularios

Los diálogos de formulario permiten a los usuarios llenar campos dentro de un cuadro de diálogo. Por ejemplo, si su sitio solicita a los potenciales suscriptores completar su dirección de correo electrónico, pueden completar el campo y tocar 'Enviar'.

Diálogos personalizados

He aquí un ejemplo de personalización del componente. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

The dialog has a close button added to aide usability.

Diálogos de pantalla completa

Tamaños opcionales

Puede establecer un ancho máximo de diálogo utilizando el enumerable maxWidth en combinación con el boleano fullWidth. Cuando la propiedad fullWidth es verdadera, el diálogo se adaptará según el valor de maxWidth.

Pantalla completa responsiva

You may make a dialog responsively full screen using useMediaQuery.

import useMediaQuery from '@material-ui/core/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return <Dialog fullScreen={fullScreen} />
}

Diálogos de confirmación

Los diálogos de confirmación requieren que los usuarios confirmen explícitamente su elección antes de que se confirme una opción. For example, users can listen to multiple ringtones but only make a final selection upon touching "OK".

Touching "Cancel" in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog.

Interruptions

Phone ringtone

Dione

Default notification ringtone

Tethys

Diálogo arrastrable

Puede crear un cuadro de diálogo arrastrable utilizando react-draggable. Para hacerlo, puede pasar el componente importado Draggable como PaperComponent del componente Dialog. Esto hará que todo el diálogo se pueda arrastrar.

Desplazando contenido largo

When dialogs become too long for the user's viewport or device, they scroll.

scroll=paper el contenido del diálogo se desplaza dentro del elemento Paper.
scroll=body el contenido del diálogo se desplaza dentro del elemento body.

Prueba la demostración de abajo para ver lo que queremos decir:

Rendimiento

Sigue la Sección de rendimiento de Modal.

Limitaciones

Follow the Modal limitations section.

Accesibilidad

Sigue la Sección de accesibilidad de Modal.