React Suite Sidenav Navegación lateral personalizada

Posted on by Rudeus Greyrat

React suite es una biblioteca de componentes de React que tiene 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 navegación lateral personalizada de React Suite Sidenav. Para crear una navegación lateral personalizada, podemos usar paneles, divisores, etc. para personalizar un componente sidenav.

Navegación lateral personalizada:

  • Panel: se utiliza para establecer la propiedad del panel para personalizar un área del panel.
  • Divisor: se utiliza para establecer la propiedad del divisor y establecer una línea de división.

Accesorios de navegación lateral:

  • as: se utiliza para especificar componentes personalizados de la barra de navegación.
  • apariencia: Se utiliza para la apariencia sidenav. Puede tener los valores de ‘predeterminado’, ‘inverso’ y ‘sutil’.
  • classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente. El valor predeterminado es ‘barra de navegación’.
  • defaultOpenKeys: se utiliza para indicar el menú Abrir que corresponde a la tecla de evento desplegable.
  • expandido: Se utiliza para indicar si expandir o no el Sidenav.
  • onOpenChange: es una función de devolución de llamada de apertura de menú que cambió.
  • openKeys: se utiliza para indicar el menú Abrir que corresponde a la tecla de evento desplegable que se controla.

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, Sidenav } from "rsuite/";

// App.JS file
function() {
    <Sidenav>
       <Sidenav.Body>
          <Nav>
            <Nav.Item>...</Nav.Item>
            <Nav.Item divider />
            <Nav.Item panel 
              style={{ padding: "20px 10px", color: "black" }}>
              ...
            </Nav.Item>
          </Nav>
       <Sidenav.Body>
    </Sidenav>
}

Ejemplo 1: El siguiente ejemplo muestra un componente de navegación lateral personalizado que usa divisores y paneles.

Javascript

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import { Nav, Sidenav } from "rsuite/";
import Home from "@rsuite/icons/legacy/Home";
import FileCodeO from "@rsuite/icons/legacy/FileCodeO";
import File from "@rsuite/icons/legacy/File";
import { Code, Pin } from "@rsuite/icons";
import Info from "@rsuite/icons/legacy/Info";
   
export default function App() {
  const [expand, setExpand] = useState(true);
  const [activeKey, setActiveKey] = useState("1");
   
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>React Suite Custom SideNav</h4>
   
        <div style={{ marginTop: 20, width: 240 }}>
          <Sidenav expanded={expand} appearance="inverse ">
            <Sidenav.Body>
              <Nav activeKey={activeKey} onSelect={setActiveKey}>
                <Nav.Item eventKey="1" icon={<Home />}>
                  Home
                </Nav.Item>
                <Nav.Item eventKey="1" icon={<Info />}>
                  About
                </Nav.Item>
                <Nav.Menu eventKey="3" title="Main Content" icon={<Pin/>}>
                  <Nav.Item divider />
                  <Nav.Item
                    panel
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Tutorials
                  </Nav.Item>
                  <Nav.Item eventKey="3-1">Programming</Nav.Item>
                  <Nav.Item eventKey="3-2">Web Tech</Nav.Item>
                  <Nav.Item eventKey="3-3">Data Science</Nav.Item>
                  <Nav.Item
                    eventKey="3-4"
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Practice
                  </Nav.Item>
                  <Nav.Item eventKey="4-1">Problem of the Day</Nav.Item>
                  <Nav.Item eventKey="4-2">Company wise</Nav.Item>
   
                  <Nav.Item
                    eventKey="4-3"
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Algorithms
                  </Nav.Item>
                  <Nav.Item eventKey="4-1">Searching</Nav.Item>
                  <Nav.Item eventKey="4-2">Sorting</Nav.Item>
                  <Nav.Item eventKey="4-3">Greedy</Nav.Item>
                </Nav.Menu>
              </Nav>
            </Sidenav.Body>
            <Sidenav.Toggle
              expanded={expand}
              onToggle={(expanded) => setExpand(expanded)}
            />
          </Sidenav>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra un componente de navegación lateral personalizado que utiliza un encabezado, divisores y paneles personalizados.

Javascript

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import { Nav, Sidenav } from "rsuite/";
   
import Home from "@rsuite/icons/legacy/Home";
import FileCodeO from "@rsuite/icons/legacy/FileCodeO";
import File from "@rsuite/icons/legacy/File";
import { Code, Pin } from "@rsuite/icons";
import Info from "@rsuite/icons/legacy/Info";
   
export default function App() {
  const [expand, setExpand] = useState(true);
  const [activeKey, setActiveKey] = useState("1");
   
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>React Suite Custom SideNav</h4>
   
        <div style={{ marginTop: 20, width: 240 }}>
          <Sidenav expanded={expand}>
            <Sidenav.Header>
              <div
                style={{
                  padding: 15,
                  fontSize: 20,
                  background: "#0AA92E",
                  color: "#fff",
                }}
              >
                GeeksforGeeks
              </div>
            </Sidenav.Header>
            <Sidenav.Body>
              <Nav activeKey={activeKey} onSelect={setActiveKey}>
                <Nav.Item eventKey="1" icon={<Home />}>
                  Home
                </Nav.Item>
                <Nav.Item eventKey="1" icon={<Info />}>
                  About
                </Nav.Item>
                <Nav.Menu eventKey="3" title="Main Content" icon={<Pin />}>
                  <Nav.Item divider />
                  <Nav.Item
                    panel
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Tutorials
                  </Nav.Item>
                  <Nav.Item eventKey="3-1">Programming</Nav.Item>
                  <Nav.Item eventKey="3-2">Web Tech</Nav.Item>
                  <Nav.Item eventKey="3-3">Data Science</Nav.Item>
                  <Nav.Item
                    eventKey="3-4"
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Practice
                  </Nav.Item>
                  <Nav.Item eventKey="4-1">Problem of the Day</Nav.Item>
                  <Nav.Item eventKey="4-2">Company wise</Nav.Item>
   
                  <Nav.Item
                    eventKey="4-3"
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Algorithms
                  </Nav.Item>
                  <Nav.Item eventKey="4-1">Searching</Nav.Item>
                  <Nav.Item eventKey="4-2">Sorting</Nav.Item>
                  <Nav.Item eventKey="4-3">Greedy</Nav.Item>
                </Nav.Menu>
              </Nav>
            </Sidenav.Body>
            <Sidenav.Toggle
              expanded={expand}
              onToggle={(expanded) => setExpand(expanded)}
            />
          </Sidenav>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Referencia: https://rsuitejs.com/components/sidenav/#custom-side-navigation

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *