Componente de superposición de 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. Superponga el contenido de superposición sobre sus hermanos, o sobre toda la aplicación. Podemos usar el siguiente enfoque en ReactJS para usar el componente de superposición de Blueprint de ReactJS.

Accesorios superpuestos:

• autoFocus: se utiliza para indicar si la superposición debe adquirir el foco de la aplicación cuando se abre por primera vez o no.
• 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 o no.
• canOutsideClickClose: se utiliza para indicar si al hacer clic fuera del elemento de superposición se debe invocar onClose o no.
• 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 deje solo o no.
• hasBackdrop: se utiliza para indicar si un elemento de fondo que abarca un contenedor debe representarse detrás del contenido o no.
• 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 la superposición se abre por primera vez cuando se establece en verdadero y usePortal={true}.
• onClose: es una función de devolución de llamada que se activa cuando la interacción del usuario hace que se cierre la superposición, como hacer clic en la superposición o presionar la tecla ESC.
• 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.
• TransitionDuration: se utiliza para indicar cuánto tiempo tarda en milisegundos la transición de entrada/salida de la superposición.
• TransitionName: se utiliza para indicar el nombre de la transición para CSSTransition interno.
• usePortal: se utiliza para indicar si la superposición debe envolverse en un Portal, que representa su contenido en un nuevo elemento adjunto a portalContainer prop.

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 { Overlay, Classes, H3, Button } from "@blueprintjs/core";
  
function App() {
  
    // Open state
    const [isOpen, setIsOpen] = React.useState(false)
  
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint Overlay Component</h4>
  
            <Button onClick={() => { setIsOpen(true) }}>Toggle Overlay</Button>
  
            <Overlay className={Classes.OVERLAY_SCROLL_CONTAINER}
                isOpen={isOpen}>
                <H3>I am sample Content of Overlay</H3>
            </Overlay>
        </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/overlay