Accesorios de React Suite <Nav.Menu>

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. Los accesorios React Suite <Nav.Menu> permiten al usuario navegar a través de una sublista de opciones en forma de menú.

Accesorios de React Suite <Nav.Menu>:

• icono: Define un icono añadido para abrir el menú.
• noCaret: es un valor booleano que indica si se debe ocultar el icono de intercalación. Por defecto es falso.
• onClose: evita la función de devolución de llamada cuando se cierra el menú.
• onOpen: evita la función de devolución de llamada cuando se abre el menú.
• onToggle: evita la función de devolución de llamada cuando el menú se abre/cierra.
• openDirection: Denota la dirección hacia la que se abre el menú. Tiene dos opciones “inicio” y “fin”.
• title: Define el título del menú.

Sintaxis:

<Nav>
    <Nav.Menu></Nav.Menu>
</Nav>

Requisito previo:

•  Introducción e instalación reactJS
• Componente de navegación de React Suite
• React Suite <Elemento de navegación> 

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 rsuite

Estructura del proyecto: Se verá así:

 

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

npm start

Ejemplo 1: estamos importando el componente de navegación desde «rsuite», y para aplicar los estilos predeterminados de los componentes, estamos importando «rsuite/dist/rsuite.min.css».

Estamos agregando tres componentes <Nav.Menu> y agregamos algunos <Nav.Item> dentro de él. Al primer menú, agregamos onToggle que llamará a una función llamada onToggleChange que mostrará «toggling!» en la alerta, y al accesorio del título se agregó «Geeksforgeeks». Al segundo componente del menú, le estamos pasando «usuario» a la propiedad del título , el ícono del menú a la propiedad del ícono que hemos importado de «@rsuite/icons» y pasado noCaret .

Aplicación.js

import { Nav } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import { Menu } from "@rsuite/icons";
  
function App() {
    const onToggleChange = () => {
        alert("toggling !");
    };
    return (
        <div className="App">
            <h4> React Suite <Nav.Menu></h4>
            <Nav>
                <Nav.Menu title="Geeksforgeeks" 
                    onToggle={onToggleChange}>
                    <Nav.Item>Articles</Nav.Item>
                    <Nav.Item>Problems</Nav.Item>
                </Nav.Menu>
                <Nav.Menu title="User" 
                    icon={<Menu />} noCaret>
                    <Nav.Item>Login</Nav.Item>
                    <Nav.Item>Register</Nav.Item>
                </Nav.Menu>
            </Nav>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: En este ejemplo, estamos agregando tres componentes <Nav.Menu> al primero y le hemos pasado la prop openDirection con un valor «fin». Al segundo componente del menú, al onOpen , llamamos una función onOpenHandle que muestra “onOpenHandler!” en la alerta. Al tercer componente del menú, al onClose , llamamos una función onCloseHandle que muestra “onCloseHandler!” en la alerta.

Aplicación.js

import { Nav } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const onOpenHandle = () => {
        alert("onOpenHandler !");
    };
    const onCloseHandle = () => {
        alert("onCloseHandler !");
    };
  
    return (
        <div className="App">
            <h4> React Suite <Nav.Menu></h4>
            <Nav>
                <Nav.Menu title="Geeksforgeeks" 
                    openDirection="end">
                    <Nav.Item>Articles</Nav.Item>
                    <Nav.Item>Problems</Nav.Item>
                </Nav.Menu>
                <Nav.Menu title="onOpen Menu" 
                    onOpen={onOpenHandle}>
                    <Nav.Item>Articles</Nav.Item>
                    <Nav.Item>Problems</Nav.Item>
                </Nav.Menu>
                <Nav.Menu title="onClose Menu" 
                    onClose={onCloseHandle}>
                    <Nav.Item>Articles</Nav.Item>
                    <Nav.Item>Problems</Nav.Item>
                </Nav.Menu>
            </Nav>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/nav/#code-lt-nav-menu-gt-code