Apariencia de navegación de React Suite

Una suite de React es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre la apariencia de navegación de la suite React. Un componente de navegación proporciona una lista de varios tipos de menús de navegación, que pueden ser diseños horizontales y verticales. Un componente de navegación puede tener dos tipos de apariencia, es decir , pestañas y sutil .

Accesorios de navegación:

• activeKey: Denota la clave activa que corresponde a eventkey en Nav.Item.
• apariencia: Se utiliza para las apariencias de navegación.
• children: Denota el contenido del componente.
• classPrefix: Denota el prefijo de la clase CSS del componente.
• justificado: Se utiliza para justificar la navegación.
• onSelect: es una función de devolución de llamada que se activa después de la selección.
• pullRight: Se utiliza para que aparezca a la derecha.
• vertical: Se utiliza para la navegación apilada.

Accesorios de elementos de navegación:

• activo: Denota el estado de activación.
• as: se utiliza para agregar un tipo de elemento personalizado.
• disabled: Se utiliza para deshabilitar el estado.
• href: Denota el hipervínculo.
• icono: Se utiliza para establecer el icono para el componente.
• onSelect: es una función de devolución de llamada que se activa después de la selección de cualquier elemento.

Accesorios del menú de navegación:

• icon: Sirve para añadir un icono del ítem que abre el menú.
• noCaret: Indica si ocultar el icono de intercalación.
• onClose: es una función de devolución de llamada cuando se cierra el menú.
• onOpen: es una función de devolución de llamada cuando se abre el menú.
• onToggle: es una función de devolución de llamada cuando el menú se abre/cierra.
• openDirection: Da dirección para el menú desde donde debería estar abierto (solo disponible en submenús).
• title: Se utiliza para añadir el contenido del elemento que abre el menú.

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

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Sintaxis:

// Import statement
import { Nav } from "rsuite/";

// App.Js file
function App() {
    <Nav>
        <Nav.Item appearance="tabs">...</Nav.Item>
        <Nav.Item appearance="subtle">...</Nav.Item>
    </Nav>
}

Ejemplo 1: El siguiente ejemplo demuestra la apariencia de Nav con «pestañas».

import { useState } from "react";
import { Nav } from "rsuite/";
import "rsuite/dist/rsuite.min.css";
  
  
const MyNav = ({ active, onSelect, ...props }) => {
    return (
        <Nav {...props} activeKey={active} 
            onSelect={onSelect} style={{ marginBottom: 80 }}>
            <Nav.Item eventKey="home">Home</Nav.Item>
            <Nav.Item eventKey="practice">Practice</Nav.Item>
            <Nav.Item eventKey="tutorials">Tutorials</Nav.Item>
            <Nav.Item eventKey="job">Jobs</Nav.Item>
            <Nav.Item eventKey="about">About</Nav.Item>
        </Nav>
    );
};
  
export default function App() {
    const [activeTab, setActiveTab] = useState('home');
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Nav Appearance
                </h4>
  
                <div style={{ marginTop: 20 }}>
                    <MyNav appearance="tabs" 
                        active={activeTab} 
                        onSelect={setActiveTab} />
  
                    <MyNav appearance="tabs" 
                        reversed active={activeTab} 
                        onSelect={setActiveTab} />
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra el Nav con una apariencia «sutil».

import { useState } from "react";
import { Nav } from "rsuite/";
import "rsuite/dist/rsuite.min.css";
  
const MyNav = ({ active, onSelect, ...props }) => {
    return (
        <Nav {...props} activeKey={active} 
            onSelect={onSelect} style={{ marginBottom: 80 }}>
            <Nav.Item eventKey="home">Home</Nav.Item>
            <Nav.Item eventKey="practice">Practice</Nav.Item>
            <Nav.Item eventKey="tutorials">Tutorials</Nav.Item>
            <Nav.Item eventKey="job">Jobs</Nav.Item>
            <Nav.Item eventKey="about">About</Nav.Item>
        </Nav>
    );
};
  
export default function App() {
    const [activeTab, setActiveTab] = useState('home');
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Nav Appearance
                </h4>
  
                <div style={{ marginTop: 20 }}>
                    <MyNav appearance="subtle" 
                        active={activeTab} 
                        onSelect={setActiveTab} />
  
                    <MyNav appearance="subtle" 
                        reversed active={activeTab} 
                        onSelect={setActiveTab} />
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/nav/#appearance