Componente de cuadro de diálogo Blueprint de ReactJS

BlueprintJS es un kit de herramientas de interfaz de usuario basado en React para la web. Esta biblioteca está muy optimizada y es popular para crear interfaces que son complejas y densas en datos para aplicaciones de escritorio.

Podemos usar el siguiente enfoque en ReactJS para usar el componente de diálogo Blueprint.

Accesorios de diálogo:

• autoFocus: se utiliza para indicar si la superposición debe adquirir el foco de la aplicación cuando se abre por primera vez.
• backdropClassName: se utiliza para indicar los nombres de clase de CSS que se aplicarán al elemento de fondo.
• backdropProps: se utiliza para indicar los accesorios HTML para el elemento de fondo.
• canEscapeKeyClose: Se utiliza para indicar si al pulsar la tecla ESC se debe invocar onClose .
• canOutsideClickClose: se utiliza para indicar si al hacer clic fuera del elemento de superposición se debe invocar onClose .
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• enforceFocus: se utiliza para indicar si la superposición debe evitar que el foco se abandone.
• icono: se utiliza para indicar el nombre de un icono o un elemento de icono para representar en el encabezado del cuadro de diálogo.
• isCloseButtonShow: Se utiliza para indicar si mostrar o no el botón de cerrar en el encabezado del diálogo.
• isOpen: se utiliza para alternar la visibilidad de la superposición y sus elementos secundarios.
• perezoso: el portal que contiene los elementos secundarios se crea y se adjunta al DOM cuando se abre la superposición por primera vez cuando se establece en verdadero y usePortal es verdadero.
• onClose: es una devolución de llamada que se activa cuando la interacción del usuario hace que se cierre la superposición.
• onClosed: se utiliza para indicar un método de ciclo de vida invocado justo después de que finaliza la transición de cierre de CSS, pero antes de que el elemento secundario haya sido eliminado del DOM.
• onClosing: se utiliza para indicar un método de ciclo de vida invocado justo antes de que comience la transición de cierre de CSS en un elemento secundario.
• onOpened: se utiliza para indicar un método de ciclo de vida invocado justo después de que finaliza la transición abierta de CSS.
• onOpening: se utiliza para indicar un método de ciclo de vida invocado justo después de montar el elemento secundario en el DOM, pero justo antes de que comience la transición abierta de CSS.
• portalClassName: se utiliza para denotar una string delimitada por espacios de nombres de clase aplicados al elemento Portal si usePortal es verdadero.
• portalContainer: se utiliza para indicar el elemento contenedor en el que la superposición representa su contenido cuando usePortal es verdadero.
• estilo: se utiliza para indicar los estilos CSS que se aplicarán al cuadro de diálogo.
• título: Se utiliza para denotar el título del diálogo.
• TransitionDuration: se utiliza para indicar cuánto tiempo tarda la transición en milisegundos en aparecer/desaparecer.
• TransitionName: se utiliza para indicar el nombre de la transición para CSSTransition interno.
• usePortal: se utiliza para indicar si la superposición debe representarse dentro de un Portal adjunto a portalContainer prop.

Accesorios de diálogo de varios pasos:

• autoFocus: se utiliza para indicar si la superposición debe adquirir el foco de la aplicación cuando se abre por primera vez.
• backButtonProps: se utiliza para indicar los accesorios para el botón Atrás.
• backdropClassName: se utiliza para indicar los nombres de clase de CSS que se aplicarán al elemento de fondo.
• backdropProps: se utiliza para indicar los accesorios HTML para el elemento de fondo.
• canEscapeKeyClose: Se utiliza para indicar si al pulsar la tecla ESC se debe invocar onClose .
• canOutsideClickClose: se utiliza para indicar si al hacer clic fuera del elemento de superposición se debe invocar onClose .
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• enforceFocus: se utiliza para indicar si la superposición debe evitar que el foco se abandone.
• finalButtonProps: se utiliza para indicar los accesorios para que el botón se muestre en el paso final.
• icono: se utiliza para indicar el nombre de un icono o un elemento de icono para representar en el encabezado del cuadro de diálogo.
• initialStepIndex: se utiliza para indicar el índice de paso inicial.
• isCloseButtonShow: Se utiliza para indicar si mostrar o no el botón de cerrar en el encabezado del diálogo.
• isOpen: se utiliza para alternar la visibilidad de la superposición y sus elementos secundarios.
• perezoso: el portal que contiene los elementos secundarios se crea y se adjunta al DOM cuando se abre la superposición por primera vez cuando se establece en verdadero y usePortal es verdadero.
• nextButtonProps: se utiliza para indicar los accesorios para el siguiente botón.
• onChange: es una función de devolución de llamada que se activa cuando el usuario selecciona un paso diferente haciendo clic en Atrás, Siguiente o en un paso en sí.
• onClose: es una devolución de llamada que se activa cuando la interacción del usuario hace que se cierre la superposición.
• onClosed: se utiliza para indicar un método de ciclo de vida invocado justo después de que finaliza la transición de cierre de CSS, pero antes de que el elemento secundario haya sido eliminado del DOM.
• onClosing: se utiliza para indicar un método de ciclo de vida invocado justo antes de que comience la transición de cierre de CSS en un elemento secundario.
• onOpened: se utiliza para indicar un método de ciclo de vida invocado justo después de que finaliza la transición abierta de CSS.
• onOpening: se utiliza para indicar un método de ciclo de vida invocado justo después de montar el elemento secundario en el DOM, pero justo antes de que comience la transición abierta de CSS.
• portalClassName: se utiliza para denotar una string delimitada por espacios de nombres de clase aplicados al elemento Portal si usePortal es verdadero.
• portalContainer: se utiliza para indicar el elemento contenedor en el que la superposición representa su contenido cuando usePortal es verdadero.
• resetOnClose: se utiliza para indicar si se debe restablecer el estado del diálogo a su estado inicial al cerrarlo o no.
• estilo: se utiliza para indicar los estilos CSS que se aplicarán al cuadro de diálogo.
• título: Se utiliza para denotar el título del diálogo.
• TransitionDuration: se utiliza para indicar cuánto tiempo tarda la transición en milisegundos en aparecer/desaparecer.
• TransitionName: se utiliza para indicar el nombre de la transición para CSSTransition interno.
• usePortal: se utiliza para indicar si la superposición debe representarse dentro de un Portal adjunto a portalContainer prop.

Accesorios de DialogStep:

• backButtonProps: se utiliza para indicar los accesorios para el botón Atrás.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• id: se utiliza para indicar el identificador único utilizado para identificar qué paso se selecciona.
• nextButtonProps: se utiliza para indicar los accesorios para el siguiente botón.
• panel: se utiliza para indicar el contenido del panel.
• panelClassName: se utiliza para indicar la string delimitada por espacios de nombres de clase que se aplican al contenedor del panel de diálogo de varios pasos.
• título: se utiliza para indicar el contenido del elemento del título del paso, representado en una lista a la izquierda del panel activo.

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 @blueprintjs/core

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 '@blueprintjs/core/lib/css/blueprint.css';
import { Dialog, Classes } from "@blueprintjs/core";
  
function App() {
  
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint Dialog Component</h4>
            <Dialog
                title="Dialog Title"
                icon="info-sign"
                isOpen={true}
            >
                <div className={Classes.DIALOG_BODY}>
                    <p>
                        Sample Dialog Content to display!
                    </p>
  
                </div>
            </Dialog>
        </div>
    );
}
  
export default App;

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://blueprintjs.com/docs/#core/components/dialog