Componente de menú de diseño de Ant de la interfaz de usuario de ReactJS

. El componente de menú se usa para mostrar un propósito. Podemos usar el siguiente enfoque en ReactJS para usar el componente de menú Ant Design.

Accesorios de menú:

• defaultOpenKeys: se utiliza para indicar la array con las teclas de los submenús abiertos por defecto.
• defaultSelectedKeys: se utiliza para indicar la array con las claves de los elementos de menú seleccionados por defecto.
• expandIcon: Se utiliza para pasar el icono de expansión personalizado del submenú.
• forceSubMenuRender: se utiliza para forzar el submenú de renderizado en DOM antes de que se vuelva visible.
• inlineCollapsed: se utiliza para especificar el estado contraído cuando el menú está en modo en línea.
• inlineIndent: se utiliza para indicar la sangría de los elementos del menú en línea en cada nivel en píxeles.
• modo: Se utiliza para indicar el tipo de menú.
• múltiple: Se utiliza para permitir la selección de múltiples elementos.
• openKeys: se utiliza para denotar la array con las teclas de los submenús abiertos actualmente.
• overflowedIndicator: Sirve para pasar el icono personalizado cuando el menú está colapsado.
• seleccionable: Se utiliza para permitir la selección de elementos del menú.
• teclas seleccionadas: se utiliza para indicar la array con las teclas de los elementos de menú seleccionados actualmente.
• style: Se utiliza para definir el estilo del Node raíz.
• subMenuCloseDelay: Denota el tiempo de retraso en segundos para ocultar el submenú cuando el mouse sale.
• subMenuOpenDelay: Denota el tiempo de demora en segundos para mostrar el submenú cuando se ingresa con el mouse.
• tema: Se utiliza para definir el tema de color del menú.
• triggerSubMenuAction: es una función de devolución de llamada que puede activar la apertura/cierre del submenú.
• onClick: es una función de devolución de llamada que se llama cuando se hace clic en un elemento del menú.
• onDeselect: es una función de devolución de llamada que se llama cuando se deselecciona un elemento del menú.
• onOpenChange: es una función de devolución de llamada que se llama cuando se abren o cierran submenús.
• onSelect: es una función de devolución de llamada que se llama cuando se selecciona un elemento del menú.

Elementos de menú.Accesorios:

• peligro: Se utiliza para mostrar el estilo de peligro.
• disabled: se utiliza para indicar si el elemento del menú está deshabilitado o no.
• icono: Se utiliza para pasar el icono del elemento del menú.
• clave: se utiliza para indicar la identificación única del elemento del menú.
• título: se utiliza para establecer el título de visualización para el elemento contraído.

Menu.SubMenu Props:

• niños: se utiliza para indicar los submenús o los elementos del submenú.
• disabled: Se utiliza para indicar si el submenú está deshabilitado o no.
• icon: Se utiliza para pasar el icono del submenú.
• clave: se utiliza para indicar la ID única del submenú.
• popupClassName: se utiliza para indicar el nombre de la clase del submenú.
• popupOffset: se utiliza para indicar el desplazamiento del submenú.
• título: se utiliza para indicar el título del submenú.
• onTitleClick: es una función de devolución de llamada que se activa cuando se hace clic en el título del submenú.

Accesorios de Menu.ItemGroup:

• niños: se utiliza para indicar los elementos del submenú.
• title: Se utiliza para denotar el título del grupo.

Menu.Divider: Se utiliza como componente d

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 antd

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 "antd/dist/antd.css";
import { Menu } from 'antd';
  
const { SubMenu } = Menu;
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Menu Component</h4>
      <Menu
        defaultOpenKeys={['1']}
        defaultSelectedKeys={['1']}
        style={{ width: 300 }}
        mode="inline"
      >
        <SubMenu key="1" title="Settings">
          <Menu.Item key="2">Option 1</Menu.Item>
          <Menu.Item key="3">Option 2</Menu.Item>
          <SubMenu key="4" title="Sub-Menu">
            <Menu.Item key="5">Option 3</Menu.Item>
            <Menu.Item key="6">Option 4</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu key="7" title="Profile">
          <Menu.Item key="8">Option 5</Menu.Item>
          <Menu.Item key="9">Option 6</Menu.Item>
          <Menu.Item key="10">Option 7</Menu.Item>
          <Menu.Item key="11">Option 8</Menu.Item>
        </SubMenu>
      </Menu>
    </div>
  );
}

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://ant.design/components/menu/