Apariencia de React Suite Sidenav

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente React Suite Sidenav actúa como una barra lateral de un sitio web y permite al usuario proporcionar una forma fácil de navegar.

La propiedad de apariencia define la forma en que el sidenav aparecerá visualmente para los usuarios. Tiene tres opciones, toma un valor ya sea «predeterminado» o «inverso» o «sutil».

Sintaxis:

<Sidenav appearance=""></Sidenav>

Requisito previo: 

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: en este ejemplo, estamos creando un div y agregando el componente Sidenav con la propiedad de apariencia. Dentro de la etiqueta <Sidenav.Body> estamos agregando el componente Nav aquí estamos agregando el contenido dentro de la etiqueta <Nav.Item> que tiene una clave de evento configurada como un número en forma de string como «1», «2». Aquí, la propiedad activeKey en sidenav establece el elemento con eventKey «1» como activo.

Aplicación.js:

Javascript

import { Sidenav, Nav } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h3>React Suite Sidenav Appearance</h3>
            <p>Appearance = default</p>
            <div style={{ width: "200px" }}>
                <Sidenav appearance="default">
                    <Sidenav.Body>
                        <Nav activeKey="1">
                            <Nav.Item eventKey="1">
                                Dashboard
                            </Nav.Item>
                            <Nav.Menu eventKey="2" title="User">
                                <Nav.Item eventKey="2-1">
                                    My Profile
                                </Nav.Item>
                                <Nav.Item eventKey="2-2">
                                    My Articles
                                </Nav.Item>
                            </Nav.Menu>
                        </Nav>
                    </Sidenav.Body>
                </Sidenav>
            </div>
        </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 usando el mismo código del ejemplo anterior y cambiando la propiedad de apariencia a inversa .

Aplicación.js:

Javascript

import { Sidenav, Nav } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h3>React Suite Sidenav Appearance</h3>
            <p>Appearance = inverse</p>
            <div style={{ width: "200px" }}>
                <Sidenav appearance="inverse">
                    <Sidenav.Body>
                        <Nav activeKey="1">
                            <Nav.Item eventKey="1">
                                Dashboard
                            </Nav.Item>
                            <Nav.Menu eventKey="2" title="User">
                                <Nav.Item eventKey="2-1">
                                    My Profile
                                </Nav.Item>
                                <Nav.Item eventKey="2-2">
                                    My Articles
                                </Nav.Item>
                            </Nav.Menu>
                        </Nav>
                    </Sidenav.Body>
                </Sidenav>
            </div>
        </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 usando el mismo código del ejemplo anterior y cambiando la propiedad de apariencia a sutil .

Aplicación.js:

Javascript

import { Sidenav, Nav } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h3>React Suite Sidenav Appearance</h3>
            <p>Appearance = subtle</p>
            <div style={{ width: "200px" }}>
                <Sidenav appearance="subtle">
                    <Sidenav.Body>
                        <Nav activeKey="1">
                            <Nav.Item eventKey="1">
                                Dashboard
                            </Nav.Item>
                            <Nav.Menu eventKey="2" title="User">
                                <Nav.Item eventKey="2-1">
                                    My Profile
                                </Nav.Item>
                                <Nav.Item eventKey="2-2">
                                    My Articles
                                </Nav.Item>
                            </Nav.Menu>
                        </Nav>
                    </Sidenav.Body>
                </Sidenav>
            </div>
        </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/sidenav/#appearance

Publicación traducida automáticamente

Artículo escrito por aniluom 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 *