Grupo de botones verticales de React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente Botón se utiliza para activar una acción cuando el usuario hace clic en el botón. En este artículo, aprenderemos sobre el grupo de botones verticales de React Suite . El componente ButtonGroup junto con la propiedad vertical se usa para agrupar un conjunto de botones verticalmente.

Componentes del grupo de botones verticales de React Suite:

• Botón : este es el componente de botón más básico.
• ButtonGroup : este componente se utiliza para agrupar los botones.

Accesorios de grupos de botones verticales de React Suite:

• vertical: esta es una propiedad booleana utilizada en el componente ButtonGroup para hacer que el grupo de botones sea vertical.
• tamaño : esta propiedad del componente ButtonGroup se utiliza para cambiar el tamaño de todos los botones del grupo. Acepta cuatro valores: xs, sm, md y lg.

Sintaxis:

<ButtonGroup vertical>
     <Button>...</Button>
     <Button>...</Button>
     <Button>...</Button>
</ButtonGroup>

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

• Paso 2: muévase a la carpeta del proyecto recién creada usando el siguiente comando:

cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale los módulos requeridos (rsuite en este caso) usando el siguiente comando:

npm install rsuite

Estructura del proyecto: después de completar los pasos anteriores, la estructura del proyecto tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado. En este ejemplo, creamos dos grupos de botones verticales utilizando el componente ButtonGroup junto con la propiedad vertical proporcionada por la biblioteca rsuite.

import React from "react";
import { ButtonGroup, Button } from "rsuite";
 
// Default CSS
import "rsuite/dist/rsuite.min.css";
 
function App() {
  return (
    <div className="App" style={{ textAlign: "center" }}>
      <header style={
          { display: "block", marginBottom: "20px" }
      }>
        <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
        <h5>React Suite Vertical Button Group</h5>
      </header>
 
      {/* Vertical - Button Group 1 */}
      <ButtonGroup vertical>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
      </ButtonGroup>
 
      {/* Vertical - Button Group 2 */}
      <ButtonGroup style={{ margin: "20px" }} vertical>
        <Button appearance="primary">
            Button 1
        </Button>
        <Button appearance="primary">
            Button 2
        </Button>
        <Button appearance="primary">
            Button 3
        </Button>
        <Button appearance="primary">
            Button 4
        </Button>
        <Button appearance="primary">
            Button 5
        </Button>
      </ButtonGroup>
    </div>
  );
}
 
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

 

Ejemplo 2: En este ejemplo, usamos la propiedad de tamaño del componente ButtonGroup para controlar el tamaño de los grupos de botones verticales.

import React from "react";
import { ButtonGroup, Button } from "rsuite";
 
// Default CSS
import "rsuite/dist/rsuite.min.css";
 
function App() {
    return (
 
        <div className="App" style={{ textAlign: "center" }}>
            <header style={
                { display: "block", marginBottom: "20px" }
            }>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks
                </h3>
                <h5>React Suite Vertical Button Group</h5>
            </header>
 
            {/*Small Vertical Button Group 2 */}
            <ButtonGroup style={{ margin: "20px" }}
                vertical size="sm">
                <Button appearance="primary">
                    Button 1
                </Button>
                <Button appearance="primary">
                    Button 2
                </Button>
                <Button appearance="primary">
                    Button 3
                </Button>
                <Button appearance="primary">
                    Button 4
                </Button>
                <Button appearance="primary">
                    Button 5
                </Button>
            </ButtonGroup>
 
            {/*Medium Vertical Button Group 2 */}
            <ButtonGroup style={{ margin: "20px" }}
                vertical size="md">
                <Button appearance="primary">
                    Button 1
                </Button>
                <Button appearance="primary">
                    Button 2
                </Button>
                <Button appearance="primary">
                    Button 3
                </Button>
                <Button appearance="primary">
                    Button 4
                </Button>
                <Button appearance="primary">
                    Button 5
                </Button>
            </ButtonGroup>
 
            {/*Large Vertical Button Group 2 */}
            <ButtonGroup style={{ margin: "20px" }}
                vertical size="lg">
                <Button appearance="primary">
                    Button 1
                </Button>
                <Button appearance="primary">
                    Button 2
                </Button>
                <Button appearance="primary">
                    Button 3
                </Button>
                <Button appearance="primary">
                    Button 4
                </Button>
                <Button appearance="primary">
                    Button 5
                </Button>
            </ButtonGroup>
        </div>
    );
}
 
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/button/#vertical-group