Envoltura 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 Wrap. Una envoltura de pila es un accesorio que define si los elementos secundarios de la pila se ven obligados a usar una línea o si pueden ajustarse a varias líneas.

Sintaxis:

function App() {
    return (
        <Stack wrap spacing={4}>
             ...
        </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 una implementación básica de envolver elementos en una pila.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { Button, Stack } from "rsuite";
  
export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Stack Wrap
                </h4>
            </div>
              
            <div style={{ textAlign: "center", padding: 20, }}>
                <Stack wrap spacing={6}>
                    <Button>Button 1</Button>
                    <Button>Button 2</Button>
                    <Button>Button 3</Button>
                    <Button>Button 4</Button>
                    <Button>Button 5</Button>
                    <Button>Button 6</Button>
                    <Button>Button 7</Button>
                    <Button>Button 8</Button>
                    <Button>Button 9</Button>
                    <Button>Button 10</Button>
                    <Button>Button 11</Button>
                    <Button>Button 12</Button>
                    <Button>Button 13</Button>
                    <Button>Button 14</Button>
                    <Button>Button 15</Button>
                    <Button>Button 16</Button>
                    <Button>Button 17</Button>
                    <Button>Button 18</Button>
                    <Button>Button 19</Button>
                    <Button>Button 20</Button>
                </Stack>
            </div>
        </div>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra un envoltorio de elementos junto con un divisor en el medio de 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 Wrap
                </h4>
            </div>
  
            <div style={{ textAlign: "center", padding: 20, }}>
                <Stack wrap spacing={4} 
                    divider={<Divider vertical />}>
                    <Button>Button 1</Button>
                    <Button>Button 2</Button>
                    <Button>Button 3</Button>
                    <Button>Button 4</Button>
                    <Button>Button 5</Button>
                    <Button>Button 6</Button>
                    <Button>Button 7</Button>
                    <Button>Button 8</Button>
                    <Button>Button 9</Button>
                    <Button>Button 10</Button>
                    <Button>Button 11</Button>
                    <Button>Button 12</Button>
                    <Button>Button 13</Button>
                    <Button>Button 14</Button>
                    <Button>Button 15</Button>
                </Stack>
            </div>
        </div>
    );
}

Producción:

 

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