Accesorios de React Suite <Sidenav>

React suite 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 React suite Prop <Sidenav>. El componente <Sidenav> proporciona el menú contraído que abre o cierra un menú de navegación lateral cuando se alterna. Sidenav tiene varios accesorios que se analizan a continuación.

<Sidenav> Accesorios:

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

Sintaxis:

<Sidenav>
    <Sidenav.Toggle expanded={expand} appearance="subtle" />
    <Nav> ... <Nav>
</Sidenav>

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:

 

Ejemplo 1: el siguiente ejemplo demuestra la apariencia y los accesorios ampliados de <Sidenav>. 

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 } from "@rsuite/icons";
  
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 SideNav Props
                </h4>
  
                <div style={{ marginTop: 20, width: 240 }}>
                    <Sidenav appearance="default" expanded={expand}>
                        <Sidenav.Body>
                            <Nav activeKey={activeKey} onSelect={setActiveKey}>
                                <Nav.Item eventKey="1" icon={<Home />}>
                                    Home
                                </Nav.Item>
                                <Nav.Menu placement="rightStart" eventKey="3"
                                    title="Main Content" icon={<File />}>
                                    <Nav.Item eventKey="3-1">Articles</Nav.Item>
                                    <Nav.Item eventKey="3-2">Courses</Nav.Item>
                                    <Nav.Item eventKey="3-3">Jobs</Nav.Item>
                                </Nav.Menu>
                                <Nav.Menu placement="rightStart" eventKey="4"
                                    title="Practice" icon={<Code />}>
                                    <Nav.Item eventKey="4-1">POTD</Nav.Item>
                                    <Nav.Item eventKey="4-2">Company problems</Nav.Item>
                                </Nav.Menu>
                                <Nav.Menu placement="rightStart" eventKey="5"
                                    title="Data Structures" icon={<FileCodeO />}>
                                    <Nav.Item eventKey="4-1">Arrays</Nav.Item>
                                    <Nav.Item eventKey="4-2">Linked List</Nav.Item>
                                    <Nav.Item eventKey="4-3">Stacks</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 el elemento predeterminado OpenKeys de <Sidenav>. 

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 } from "@rsuite/icons";
  
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 SideNav Props
                </h4>
  
                <div style={{ marginTop: 20, width: 240 }}>
                    <Sidenav appearance="inverse" expanded={expand} 
                        defaultOpenKeys={["3", "4"]}>
                        <Sidenav.Body>
                            <Nav activeKey={activeKey} onSelect={setActiveKey}>
                                <Nav.Item eventKey="1" icon={<Home />}>
                                    Home
                                </Nav.Item>
                                <Nav.Menu placement="rightStart" eventKey="3"
                                    title="Main Content" icon={<File />}>
                                    <Nav.Item eventKey="3-1">Articles</Nav.Item>
                                    <Nav.Item eventKey="3-2">Courses</Nav.Item>
                                    <Nav.Item eventKey="3-3">Jobs</Nav.Item>
                                </Nav.Menu>
                                <Nav.Menu placement="rightStart" eventKey="4"
                                    title="Practice" icon={<Code />}>
                                    <Nav.Item eventKey="4-1">POTD</Nav.Item>
                                    <Nav.Item eventKey="4-2">Company problems</Nav.Item>
                                </Nav.Menu>
                                <Nav.Menu placement="rightStart" eventKey="5"
                                    title="Data Structures" icon={<FileCodeO />}>
                                    <Nav.Item eventKey="4-1">Arrays</Nav.Item>
                                    <Nav.Item eventKey="4-2">Linked List</Nav.Item>
                                    <Nav.Item eventKey="4-3">Stacks</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/#code-lt-sidenav-gt-code