Pop ups con Dialog de Material UI en React
¿Qué es Material UI?
Material UI es un framework de react que nos ayuda a construir nuestra página de forma rápida y sencilla. En este post explicaremos como instalarlo y como utilizar la herramienta Dialog
¿Cómo utilizar Material UI?
Lo primero que debemos hacer para trabajar con Material UI es instalarlo por linea de comando con CMD, CMDER o el propio terminar de visual studio code.
Podemos utilizar o bien si usamos npm
npm install @material-ui/coreo si queremos utilizar yarn
yarn add @material-ui/core ¿Qué es Dialog?
La herramienta Dialog de Material UI nos permiten crear ventanas modales encima de nuestra pagina para proveer información importante o pedir al usuario que tome una decisión. Estos diálogos deshabilitan la aplicación cuando aparecen y son visibles hasta que el usuario toma la decisión necesaria.
Estos Dialog están diseñados para interrumpir la actividad del usuario por lo que debemos utilizarlos cuando sean necesarios. Por ejemplo: cuando el usuario quiere borrar algún dato de un servicio web.
¿Cómo se forma un Dialog?
Lo primero de todo será importar todo lo necesario de @material-ui/core/Dialog.
import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";El Dialog está compuesto por el contenedor <Dialog></Dialog> que es la ventana que almacena nuestra ventana emergente.
En segundo lugar, tenemos el titulo el cual es opcional y encabezará nuestro mensaje. En tercer lugar, tenemos el cuerpo de nuestra ventana que nos permite enseñar información o desplegar otros objetos. En cuarto lugar, tenemos los botones con los cuales cerraremos nuestra ventana haciendo una función preestablecida. Y por ultimo, tenemos el cuerpo de nuestra aplicación, la cual se queda deshabilitada hasta que nuestra ventana emergente deja de actuar.
La estructura de nuestro Dialog será la siguiente
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="responsive-dialog-title"
>
<DialogTitle id="responsive-dialog-title">
{"Titulo de alerta"}
</DialogTitle>
<DialogContent>
<DialogContentText>Soy el mensaje de la alerta</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} className="btn btn-success">
Aceptar
</Button>
<Button onClick={this.handleClose} className="btn btn-danger">
Cancelar
</Button>
</DialogActions>
</Dialog>Otras funciones
- TextField
También podremos introducir un campo para introducir un texto desde nuestra alerta con TextField. Este actuará como si fuese un formulario pero con la inserción de datos en la alerta. Dentro de DialogContent escibiremos lo siguiente
<TextField
autoFocus
margin="dense"
id="Nombre"
label="Texto que queramos"
type="Tipo que queramos"
fullWidth />Dentro del cuerpo podremos crear formularios a nuestra voluntad haciendo que estos se puedan almacenar cuando le demos al botón de aceptar jugando con condiciones y variables
- Diálogos de confirmación
Los diálogos de confirmación requieren que los usuarios confirmen su elección antes de confirmar una opción. Un ejemplo de esto es que un usuario puede ver varias opciones a la vez pero solo se seleccionará la que tenga seleccionada en el momento que le de a aceptar. Estos se manejarán de manera similar al caso anterior. salvo que en este caso utilizaremos onChange en nuestro select para almacenar la opción que tenemos guardada cada vez que cambiamos
- Cambiar de tamaño
Podemos cambiar el tamaño de nuestra ventana desde los atributos de Dialog cambiando los valores de fullWidth y maxWidth utilizando los valores false, xs, sm, md, lg y xl ordenados estos de mayor a menor para maxWidth y para FullWidth lo trataremos como si se tratase de un boolean.
- Desplazamiento de contenido largo
Cuando tenemos un mensaje muy largo en nuestro popUp, podemos hacer que aparezca una barra para scrollear pasando a nuestro openHandler el tipo de scroll que queremos utilizar por parámetros. Tenemos que utilizar paper o body y estos harán que aparezca la barra en nuestra ventana emergente o que aparezca en el navegador.
Conclusión
En conclusión, esta herramienta puede ser muy útil siempre y cuando la usemos sabiamente y no abusemos de ella ya que como he dicho antes, esto puede romper la experiencia del usuario en nuestra aplicación. Algunas de las dificultades que me encontré al hacer este post fueron la falta de información de como usar este framework y que la información está un poco desactualizada pero a pesar de todo, es bastante útil y se puede solventar fácilmente utilizando la api para saber que debemos de utilizar
Autor/a: Javier López Collado
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020/2021
Código / recursos utilizados / Otros datos de interés: