Divisores de pila 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 React Suite Stack Dividers. Un divisor en una pila agrega un elemento entre cada elemento secundario utilizado en una pila.

Sintaxis:

function App() {
    return (
         <Stack divider={<Divider vertical />}>
              ...
         </Stack>
    );
}

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 muestra un divisor básico utilizado en una pila.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { Button, Divider, Stack } from "rsuite";
  
export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Stack Divider
                </h4>
            </div>
            <div
                style={{
                    textAlign: "center",
                    padding: 20,
                }}
            >
                <Stack divider={<Divider vertical />}>
                    <Button>Item 1</Button>
                    <Button>Item 2</Button>
                    <Button>Item 3</Button>
                </Stack>
            </div>
        </div>
    );
}

Producción:

 

Ejemplo 2: el siguiente ejemplo muestra un divisor basado en texto utilizado en una pila.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { Button, Divider, Stack } from "rsuite";
  
export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Stack Divider
                </h4>
            </div>
            <div
                style={{
                    textAlign: "center",
                    padding: 20,
                }}
            >
                <Stack divider={<Divider>GFG</Divider>}>
                    <Button appearance="primary" 
                        color="blue">Sign Up</Button>
                    <Button appearance="primary" 
                        color="green">Log In</Button>
                    <Button>Cancel</Button>
                </Stack>
            </div>
        </div>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/stack/#dividers