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:
- Introducción e instalación reactJS
- Componente de navegación lateral de React Suite
- 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: 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