Diseño de la barra lateral del contenedor de React Suite

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 el diseño de la barra lateral del contenedor de React Suite . El diseño del contenedor puede definir el marco principal de la página utilizando componentes de encabezado, contenido, barra lateral y pie de página . La barra lateral se utiliza para proporcionar funcionalidad de navegación lateral a los usuarios.

Sintaxis:

<Container>
    <Sidebar>...</Sidebar>
     <Header>Header</Header>
     <Content>Content</Content>
     <Footer>Footer</Footer>
</Container>

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 el diseño básico de la barra lateral.

App.js

import {
    Container,
    Header,
    Footer,
    Content,
    Sidebar,
    Sidenav,
    Nav,
} from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Sidebar Layout
                </h4>
                <div style={{ marginTop: 20, width: 800 }}>
                    <Container>
                        <Sidebar 
                            style={{ 
                                backgroundColor: "#172F50", 
                                padding: 30 
                            }}
                        >
                            <h4 style={{ color: "white" }}>
                                GeeksforGeeks
                            </h4>
                            <ul
                                style={{
                                    listStyleType: "none",
                                    padding: 10,
                                    fontSize: 20,
                                    color: "white",
                                }}
                            >
                                <li>Tutorials</li>
                                <li>Courses</li>
                                <li>Jobs</li>
                                <li>Practice</li>
                                <li>Contact</li>
                            </ul>
                        </Sidebar>
                        <Container>
                            <Header
                                style={{
                                    backgroundColor: "green",
                                    padding: 20,
                                    color: "white",
                                }}
                            >
                                <h2>GeeksforGeeks</h2>
                            </Header>
                            <Content
                                style={{
                                    backgroundColor: "lightgreen",
                                    padding: 40,
                                    color: "white",
                                }}
                            >
                                GeeksforGeeks is a portal for geeks. 
                                It is a collection of well-written, 
                                well-thought, and well-responsive articles.
                            </Content>
                            <Footer
                                style={{
                                    backgroundColor: "lightgray",
                                    padding: 20,
                                    color: "white",
                                }}
                            >
                                © GeeksforGeeks.org
                            </Footer>
                        </Container>
                    </Container>
                </div>
            </div>
        </center>
    );
}

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

 

Ejemplo 2: El siguiente ejemplo muestra el diseño de la barra lateral con navegación lateral.

App.js

import { useState } from "react";
import {
    Container,
    Header,
    Content,
    Sidebar,
    Sidenav,
    Nav,
    Navbar,
} from "rsuite";
  
import "rsuite/dist/rsuite.min.css";
import Cog from "@rsuite/icons/legacy/Cog";
import AngleLeft from "@rsuite/icons/legacy/AngleLeft";
import AngleRight from "@rsuite/icons/legacy/AngleRight";
  
const ToggleButton = ({ expand, onChange }) => {
    return (
        <Navbar appearance="subtle" className="nav-toggle">
            <Navbar.Body>
                <Nav>
                    <Nav.Menu
                        placement="topStart"
                        trigger="click"
                        renderTitle={(children) => {
                            return (
                                <Cog
                                    style={{
                                        width: 56,
                                        height: 56,
                                        padding: 18,
                                        lineHeight: "56px",
                                        textAlign: "center",
                                    }}
                                />
                            );
                        }}
                    >
                        <Nav.Item>Help</Nav.Item>
                        <Nav.Item>Settings</Nav.Item>
                        <Nav.Item>Sign out</Nav.Item>
                    </Nav.Menu>
                </Nav>
  
                <Nav pullRight>
                    <Nav.Item
                        onClick={onChange}
                        style={{ width: 56, textAlign: "center" }}
                    >
                        {expand ? <AngleLeft /> : <AngleRight />}
                    </Nav.Item>
                </Nav>
            </Navbar.Body>
        </Navbar>
    );
};
  
export default function App() {
    const [expand, setExpand] = useState(true);
  
    return (
        <div>
            <Container>
                <Sidebar
                    style={{ 
                        display: "flex", 
                        flexDirection: "column" 
                    }}
                    width={expand ? 260 : 56}
                    collapsible
                >
                    <Sidenav.Header>
                        <div
                            style={{
                                padding: 18,
                                fontSize: 20,
                                height: 56,
                                color: " #fff",
                                background: "green",
                            }}
                        >
                            <span style={{ marginLeft: 12 }}>
                                GeeksforGeeks
                            </span>
                        </div>
                    </Sidenav.Header>
                    <Sidenav expanded={expand} defaultOpenKeys={["2"]}>
                        <Sidenav.Body>
                            <Nav>
                                <Nav.Item eventKey="1" active>
                                    My Dashboard
                                </Nav.Item>
                                <Nav.Item eventKey="2">
                                    Posts
                                </Nav.Item>
                                <Nav.Menu
                                    eventKey="3"
                                    trigger="hover"
                                    title="Courses"
                                    placement="rightStart"
                                >
                                    <Nav.Item eventKey="3-1">
                                        Full Stack Dev
                                    </Nav.Item>
                                    <Nav.Item eventKey="3-2">
                                        DSA
                                    </Nav.Item>
                                    <Nav.Item eventKey="3-3">
                                        C++
                                    </Nav.Item>
                                    <Nav.Item eventKey="3-4">
                                        Java
                                    </Nav.Item>
                                    <Nav.Item eventKey="3-5">
                                        Python
                                    </Nav.Item>
                                </Nav.Menu>
                                <Nav.Menu
                                    eventKey="4"
                                    trigger="hover"
                                    title="Tutorials"
                                    placement="rightStart"
                                >
                                    <Nav.Item eventKey="4-1">
                                        Data Structures
                                    </Nav.Item>
                                    <Nav.Item eventKey="4-2">
                                        Algorithms
                                    </Nav.Item>
                                    <Nav.Item eventKey="4-3">
                                        Web Dev
                                    </Nav.Item>
                                    <Nav.Item eventKey="4-4">
                                        Android Dev
                                    </Nav.Item>
                                </Nav.Menu>
                            </Nav>
                        </Sidenav.Body>
                    </Sidenav>
                    <ToggleButton 
                        expand={expand} 
                        onChange={() => setExpand(!expand)} 
                    />
                </Sidebar>
  
                <Container>
                    <Header style={{ padding: 20 }}>
                        <h2>Welcome to GeeksforGeeks</h2>
                    </Header>
                    <Content style={{ padding: 20 }}>
                        <h3>Dashboard</h3>
                        <p>
                            GeeksforGeeks is a portal for the 
                            community of geeks. It is a place 
                            for you to share your knowledge, share 
                            your experience, and connect with other geeks.
                        </p>
                    </Content>
                </Container>
            </Container>
        </div>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/container/#sidebar-layout

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 *