Componente de cajón 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.

El contenido de Draweroverlay sobre las partes existentes de la interfaz de usuario. Podemos usar el siguiente enfoque en ReactJS para usar el componente de cajón Blueprint de ReactJS.

Accesorios de cajón:

• 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 presionar 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 la 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.
• icono: se utiliza para indicar el nombre de un icono o un elemento de icono para mostrar en el encabezado del cajón.
• isCloseButtonShown: Se utiliza para indicar si mostrar o no el botón de cerrar en el encabezado del diálogo.
• isOpen: se utiliza para indicar la visibilidad de la superposición y sus elementos secundarios.
• perezoso: se usa para indicar que el portal que contiene los elementos secundarios se crea y se adjunta al DOM cuando se abre la superposición por primera vez si se establece en verdadero y usePortal={true}.
• onClose: se utiliza para indicar 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 el 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 el método de ciclo de vida invocado justo antes de que comience la transición de cierre de CSS en un elemento secundario. Recibe el elemento DOM del elemento secundario que se está cerrando.
• onOpened: se utiliza para indicar el método de ciclo de vida invocado justo después de que finaliza la transición abierta de CSS.
• onOpening: se utiliza para indicar el 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 indicar la string de nombres de clase delimitada por espacios que se aplica al elemento Portal si usePortal={true}.
• portalContainer: se utiliza para indicar el elemento contenedor en el que la superposición representa su contenido cuando usePortal es verdadero.
• posición: Se utiliza para la Posición de un cajón.
• shouldReturnFocusOnClose: Se utiliza para indicar si la aplicación debe devolver el foco al último elemento activo del documento después de que se cierre este cajón.
• tamaño: se utiliza para indicar el tamaño CSS del cajón.
• 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 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 se debe envolver en un Portal.
• vertical: Se utiliza para indicar si el cajón debe aparecer con estilo vertical.

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 { Drawer, Classes } from "@blueprintjs/core";
  
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint Drawer Component</h4>
            <Drawer
                isOpen={true}
                icon="info-sign"
                title="Drawer Title"
            >
                <div className={Classes.DRAWER_BODY}>
                    <div className={Classes.DIALOG_BODY}>
                        <p>I am sample body text!!</p>
  
                    </div>
                </div>
                <div className={Classes.DRAWER_FOOTER}>Drawer Footer</div>
            </Drawer>
        </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/drawer