Accesorios de la barra 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 de la barra de navegación de React Suite actúa como un navegador en la parte superior de un sitio web y le permite al usuario proporcionar una manera fácil de navegar.

Accesorios de la barra de navegación:

• as: Denota el tipo de elemento del componente. Es ‘div’ por defecto, pero se puede personalizar el elemento para este componente.
• 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 «barra de navegación».
• apariencia: Define la forma en que la barra de navegación aparecerá visualmente para los usuarios. Tiene tres opciones, toma un valor ya sea «predeterminado» o «inverso» o «sutil».

Sintaxis:

<Navbar></Navbar>

Requisito previo:

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

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í:

 

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

En este ejemplo, examinaremos la propiedad de apariencia . Estamos agregando tres componentes de la barra de navegación junto con el componente <Nav.Item> y estamos pasando diferentes valores a la propiedad de apariencia del componente de la barra de navegación.

import { Nav, Navbar } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  return (
    <div className="App">
      <h4> React Suite Navbar Props</h4>
      <Navbar>
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar appearance="inverse">
        <Navbar.Brand>GeeksforGeeks</Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar appearance="subtle">
        <Navbar.Brand>GeeksforGeeks</Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
    </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: estamos importando el componente Nav y Navbar desde «rsuite», y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css».

En este ejemplo, examinaremos el as prop. Estamos agregando tres componentes de la barra de navegación junto con el componente <Nav.Item> y estamos pasando diferentes valores a como prop del componente de la barra de navegación.

import { Nav, Navbar } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  return (
    <div className="App">
      <h4> React Suite Navbar Props</h4>
      <Navbar>
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar as="h3">
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar as="em">
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
    </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 3: estamos importando el componente Nav y Navbar desde «rsuite», y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css».

En este ejemplo, examinaremos la propiedad classPrefix . Estamos agregando tres componentes de la barra de navegación junto con el componente <Nav.Item> y estamos pasando diferentes valores a la propiedad classPrefix del componente de la barra de navegación.

import { Nav, Navbar } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  return (
    <div className="App">
      <h4> React Suite Navbar Props</h4>
      <Navbar>
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar classPrefix="modal-title">
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar classPrefix="sidenav">
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
    </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://rsuitejs.com/components/navbar/#code-lt-navbar-gt-code