Componente de diálogo Evergreen de ReactJS

React Evergreen es una biblioteca front-end popular con un conjunto de componentes React para crear productos hermosos, ya que esta biblioteca es flexible, tiene valores predeterminados sensibles y es fácil de usar. El componente de diálogo permite al usuario requerirPodemos usar el siguiente enfoque en ReactJS para usar el componente de diálogo Evergreen.

Accesorios de diálogo:

• hijos: los hijos pueden ser una string, una función o un Node.
• intención: Se utiliza para indicar la intención del Diálogo.
• isShown: se utiliza para mostrar el cuadro de diálogo cuando se establece en verdadero.
• título: Se utiliza para denotar el Título del Diálogo.
• hasHeader: se mostrará el encabezado con el título y el botón de icono de cierre si se establece en verdadero.
• encabezado: se utiliza para anular el encabezado predeterminado con nuestro propio componente personalizado.
• hasFooter: se utiliza para mostrar el pie de página con el botón cancelar y confirmar cuando se establece en verdadero.
• pie de página: se utiliza para anular el pie de página predeterminado con nuestro propio componente personalizado.
• hasCancel: se utiliza para mostrar el botón cancelar cuando se establece en verdadero.
• hasClose: se utiliza para mostrar el botón de cierre cuando se establece en verdadero.
• onCloseComplete: es una función que se activará cuando se complete la transición de salida.
• onOpenComplete: es una función que se activará cuando se complete la transición de entrada.
• onConfirm: es una función que se activará cuando se haga clic en el botón de confirmación.
• confirmLabel: se utiliza para indicar la etiqueta del botón de confirmación.
• isConfirmLoading: el botón de confirmación se establece en el estado de carga cuando se establece en verdadero.
• isConfirmDisabled: el botón de confirmación se configura para desactivar el estado cuando se establece en verdadero.
• onCancel: es una función que se activará cuando se haga clic en el botón cancelar.
• cancelLabel: se utiliza para indicar la etiqueta del botón cancelar.
• shouldCloseOnOverlayClick: se utiliza para indicar si la superposición debe cerrar la superposición al hacer clic o no.
• shouldCloseOnEscapePress: se utiliza para indicar si al presionar la tecla ESC se debe cerrar la superposición o no.
• ancho: se utiliza para indicar el ancho del diálogo.
• topOffset: se utiliza para indicar el espacio encima del cuadro de diálogo.
• sideOffset: cuando no hay suficiente espacio horizontal disponible en la pantalla, se usa para indicar el espacio en los lados izquierdo/derecho del cuadro de diálogo.
• minHeightContent: se utiliza para indicar la altura mínima del contenido del cuerpo.
• containerProps: se utiliza para indicar los accesorios que se pasan al contenedor de diálogo.
• contentContainerProps: se utiliza para indicar los accesorios que se pasan al contenedor de contenido.
• preventBodyScrolling: Se utiliza para indicar si se debe evitar el desplazamiento en el cuerpo exterior o no.
• overlayProps: se utiliza para indicar los accesorios que se pasan al componente Overlay.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

 

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install evergreen-ui

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import { Dialog, Button } from 'evergreen-ui'
  
export default function App() {
  
  const [openDialog, setOpenDialog] = React.useState(false)
  
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>ReactJS Evergreen Dialog Component</h4>
  
      <Button onClick={() => setOpenDialog(true)}>
        Open Dialog
      </Button>
  
      <Dialog
        isShown={openDialog}
        title="Sample Dialog"
        confirmLabel="This is a sample dialog for demo"
        onCloseComplete={() => setOpenDialog(false)}
      >
        Dialog content
      </Dialog>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://evergreen.segment.com/components/dialog