Componente de menú 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. El componente de menú proporciona una forma para que los usuarios muestren listas de elementos interactivos. Podemos usar el siguiente enfoque en ReactJS para usar el componente de menú Blueprint de ReactJS.

Accesorios de menú:

• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• grande: se utiliza para indicar si los elementos del menú en este menú deben tener una apariencia grande o no.
• ulRef: se utiliza para indicar el controlador Ref que recibe el elemento HTML <ul> que respalda este componente.

Accesorios de elemento de menú:

• activo: Se utiliza para indicar si este elemento del menú debe aparecer con un estado activo.
• children: se utiliza para indicar que los hijos de este componente se mostrarán en un submenú.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• disabled: Se utiliza para indicar si este elemento del menú es no interactivo o no.
• href: se utiliza para indicar la URL del enlace.
• htmlTitle: se utiliza para indicar el título HTML que se pasará al componente
• icono: se utiliza para indicar el nombre del icono o el elemento del icono que se representará antes del texto.
• intención: se utiliza para indicar el color de la intención visual que se aplicará al elemento.
• etiqueta: se utiliza para etiquetar contenido de texto alineado a la derecha, útil para mostrar teclas de acceso rápido.
• labelClassName: se utiliza para denotar una lista delimitada por espacios de nombres de clases para pasar al elemento contenedor de etiquetas alineado a la derecha.
• labelElement: se utiliza para etiquetar contenido alineado a la derecha, útil para mostrar teclas de acceso rápido.
• multilínea: se utiliza para indicar si se debe permitir que el texto se ajuste a varias líneas o no.
• onClick: se utiliza para indicar un controlador de eventos de clic.
• popoverProps: se utiliza para indicar los accesorios que se propagarán a Popover.
• shouldDismissPopover: se utiliza para indicar si un elemento habilitado sin un submenú debe cerrar automáticamente su ventana emergente principal cuando se hace clic o no.
• tagName: se utiliza para indicar el nombre de la etiqueta HTML que envuelve el MenuItem.
• target: se utiliza para indicar el atributo de destino del enlace.
• texto: se utiliza para indicar el texto del artículo, necesario para la usabilidad.
• textClassName: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar al elemento contenedor de texto.

Accesorios de MenuDivider:

• niños: este componente no admite niños.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• title: se utiliza para indicar el título del encabezado opcional.

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 { Menu, Classes, MenuItem, MenuDivider, Icon } from "@blueprintjs/core";
 
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint Menu Component</h4>
            <Menu className={Classes.ELEVATION_1}>
                <MenuItem icon={<Icon icon="home" />} text="Home" />
                <MenuDivider />
                <MenuItem icon="new-link" text="WebLinks" />
                <MenuItem icon="user" text="Profile" />
                <MenuDivider />
                <MenuItem icon="cog" text="Setting" />
            </Menu>
        </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:

Ejemplo 2: en este ejemplo, aprenderemos cómo podemos crear elementos de submenú 

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Menu, Classes, MenuItem, MenuDivider, Icon } from "@blueprintjs/core";
 
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
    }}>
    <h1 style={{color:'green'}}>GeeksforGeeks</h1>
            <h4>ReactJS Blueprint Menu Component</h4>
            <Menu className={Classes.ELEVATION_1}>
        <MenuItem icon={<Icon icon="home" />} text="Home" >
        <MenuItem  text="GeeksforGeeks" />
        <MenuItem  text="GeeksforGeeks School" />
        </MenuItem>
                <MenuDivider />
                <MenuItem icon="new-link" text="WebLinks" />
                <MenuItem icon="user" text="Profile" />
                <MenuDivider />
        <MenuItem icon="cog" text="Setting" />
        <MenuDivider/>
        <MenuItem icon="style" text="Style">
        <MenuItem icon="bold" text="Bold" />
        <MenuItem icon="italic" text="Italic" />
        <MenuItem icon="underline" text="Underline" />
    </MenuItem>
            </Menu>
        </div >
    );
}
 
export default App;

Producción:

 

Referencia: https://blueprintjs.com/docs/#core/components/menu