Accesorios de React Suite <Pila>

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 los accesorios <Stack> de la suite React. El componente <Stack> se usa para diseñar componentes a través de Flexbox, que también admite el apilamiento vertical u horizontal y admite espaciados y envolturas personalizados.

<Pila> Accesorios:

• alignItems: Se utiliza para definir la alineación de los hijos en la pila en el eje transversal.
• classPrefix: Denota el prefijo de la clase CSS del componente.
• dirección: Define la dirección de los hijos en la pila.
• divisor: Añade un elemento entre cada hijo.
• justifyContent: Define la alineación de los hijos en la pila en el eje en línea.
• espaciamiento: Define el espaciamiento entre hijos inmediatos.
• wrap: define si los elementos secundarios de la pila se fuerzan en una línea o pueden ajustarse en varias líneas.

Sintaxis:

<Stack direction={direction} alignItems={alignment} 
    justifyContent={justifyContent}>
    ...
</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 demuestra el accesorio de espaciado de <Stack>. 

import "rsuite/dist/rsuite.min.css";
import { Button, Input, Stack } from "rsuite";
  
export default function App() {
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
          React Suite Stack Prop
        </h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
          <Stack spacing={10}>
            <Input placeholder="Enter your email" />
            <Button appearance="primary" 
              color="green">Apply</Button>
            <Button>Reset</Button>
          </Stack>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 2: el siguiente ejemplo muestra la dirección, los elementos de alineación, el divisor y los accesorios de espaciado de <Stack>. 

import "rsuite/dist/rsuite.min.css";
import { Button, Divider, Input, Radio, 
    RadioGroup, Stack } from "rsuite";
import { useState } from "react";
  
export default function App() {
  const [alignItems, setAlignItems] = useState('flex-start');
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
          React Suite Stack Prop
        </h4>
  
        <div style={{ marginTop: 20, width: 500 }}>
          <Stack spacing={6} direction="column" 
            divider={<Divider vertical />}  
            alignItems={alignItems}>
            <Input placeholder="Enter your email" />
            <Input placeholder="Enter your phone" />
            <Button appearance="primary" color="green">
              Submit
            </Button>
          </Stack>
          <hr />
          <Stack>
            <label>Align Items:</label>
            <RadioGroup inline value={alignItems} 
              onChange={setAlignItems}>
              <Radio value="flex-start">flex-start</Radio>
              <Radio value="center">center</Radio>
              <Radio value="flex-end">flex-end</Radio>
            </RadioGroup>
          </Stack>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Referencia: https://rsuitejs.com/components/stack/#code-lt-stack-gt-code