Accesorios de navegación de React Suite

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente React Suite Nav actúa como un navegador que le permite al usuario proporcionar una manera fácil de navegar.

Los accesorios son:

• classPrefix: esto denota el prefijo de la clase CSS del componente. Especificar cualquier valor aquí cambiará el nombre de la clase del Componente. Esto puede ser útil para aplicar un estilo personalizado basado en el nombre de la clase. El valor predeterminado es «navegación».
• activeKey: Toma un valor de string, correspondiente a eventKey en <Nav.item>.
• apariencia: Define la apariencia del componente. Tiene tres opciones para elegir entre ‘predeterminado’, ‘pestañas’ o ‘sutil’.
• children*: Define el contenido del componente.
• justificado: Es un valor booleano. Justifica la navegación. Es cierto por defecto.
• onSelect: una función de devolución de llamada nula que se activa después de la selección.
• pullRight : Es un valor booleano. Hace que el componente aparezca a la derecha.
• vertical: Es un valor booleano. Hace que el componente parezca vertical.

Sintaxis:

<Nav></Nav>

Requisito previo:

• Introducción e instalación reactJS
• Componente React Suite <Nav.Item>

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.

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».

En este ejemplo, estamos agregando dos componentes de navegación, en el primero estamos pasando el accesorio de apariencia como «sutil» y el accesorio justificado. Para el segundo, estamos pasando la propiedad de apariencia vertical como «pestañas» y activeKey como «Artículos».

import { Nav } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
  
    return (
        <div className="App">
            <h4>React Suite Nav Prop</h4>
            <Nav appearance="subtle" justified>
                <Nav.Item>Articles</Nav.Item>
                <Nav.Item>Problems</Nav.Item>
                <Nav.Item>Events</Nav.Item>
            </Nav>
            <p style={{ textAlign: "center", 
                margin: 10 }}>Verticle Nav</p>
  
            <Nav vertical appearance="tabs" 
                activeKey={"Articles"}>
                <Nav.Item eventKey="Articles">
                    Articles</Nav.Item>
                <Nav.Item eventKey="Problems">
                    Problems</Nav.Item>
                <Nav.Item eventKey="Events">
                    Events</Nav.Item>
            </Nav>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: estamos agregando tres componentes de navegación y pasando diferentes valores a la propiedad classPrefix . En el primer componente, también llamamos a una función onSelect denominada onSelectHandle que muestra la clave de evento que seleccionamos.

import { Nav } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    const onSelectHandle = (e) => {
        alert(e);
    };
    return (
        <div className="App">
            <h4>React Suite Nav Prop</h4>
            <Nav classPrefix="modal-title" 
                onSelect={onSelectHandle}>
                <Nav.Item eventKey="Articles">
                    Articles</Nav.Item>
                <Nav.Item eventKey="Problems">
                    Problems</Nav.Item>
                <Nav.Item eventKey="Events">
                    Events</Nav.Item>
            </Nav>
            <hr />
            <Nav classPrefix="breadcrumb">
                <Nav.Item eventKey="Articles">
                    Articles</Nav.Item>
                <Nav.Item eventKey="Problems">
                    Problems</Nav.Item>
                <Nav.Item eventKey="Events">
                    Events</Nav.Item>
            </Nav>
            <hr />
            <Nav classPrefix="sidenav" 
                style={{ width: 100 }}>
                <Nav.Item eventKey="Articles">
                    Articles</Nav.Item>
                <Nav.Item eventKey="Problems">
                    Problems</Nav.Item>
                <Nav.Item eventKey="Events">
                    Events</Nav.Item>
            </Nav>
        </div>
    );
}
  
export default App;

Producción:

 

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