React.js Blueprint Menú Componente divisor

React.js Blueprint es un conjunto de herramientas de interfaz de usuario de front-end. Es muy optimizado y popular para crear interfaces que son complejas y densas en datos para aplicaciones de escritorio. El componente React.js Blueprint MenuDivider divide dos elementos de menú en un componente de menú.

Los accesorios son:

• niños: este componente no admite niños.
• className: es una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• title: El título del MenuDivider.

Sintaxis:

 <MenuDivider />

Requisito previo:

• Introducción e instalación ReactJS
• Componente de menú de Blueprint de ReactJS
   

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

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia usando el siguiente comando:

npm install @blueprintjs/core

Estructura del proyecto: Se verá así:

 

Ejemplo 1: estamos importando el Menú, MenuItem, MenuDivider y Clases desde “@blueprintjs/core”. Para aplicar los estilos predeterminados de los componentes estamos importando «@blueprintjs/core/lib/css/blueprint.css».

Estamos agregando los componentes <Menu>, dentro de él estamos agregando los componentes MenuItem y MenuDivider. A todos los componentes de MenuDivider estamos agregando diferentes nombres de clase.

Aplicación.js

import "@blueprintjs/core/lib/css/blueprint.css";
import { Menu, Classes, MenuItem, MenuDivider } 
    from "@blueprintjs/core";
  
function App() {
  return (
    <div className="App">
      <h4> ReactJS Menu Component Divider</h4>
      <Menu>
        <MenuItem text="Algorithms" />
  
        <MenuDivider className={Classes.ELEVATION_0} />
        <MenuItem text="Data Structures" />
  
        <MenuDivider className={Classes.BREADCRUMBS} />
        <MenuItem text="GATE" />
        <MenuDivider className={Classes.ELEVATION_4} />
        <MenuItem text="Web Technologies" />
      </Menu>
    </div>
  );
}
  
export default App;

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

npm start

Producción:

 

Ejemplo 2: a todos los componentes de MenuDivider estamos agregando diferentes className y diferentes valores al título.

Aplicación.js

import "@blueprintjs/core/lib/css/blueprint.css";
import { Menu, Classes, MenuItem, MenuDivider } 
    from "@blueprintjs/core";
  
function App() {
  return (
    <div className="App">
      <h4>ReactJS Menu Component divider</h4>
      <Menu>
        <MenuDivider title="USER" 
            className={Classes.MENU_HEADER} />
        <MenuItem text="Login" />
        <MenuItem text="Register" />
        <MenuDivider title="Courses" 
            className={Classes.ELEVATION_2} />
        <MenuItem text="For Students" />
        <MenuItem text="All Courses" />
      </Menu>
    </div>
  );
}
  
export default App;

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

npm start

Producción:

 

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