Justificación del botón 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.

Los botones justificados están dispuestos horizontalmente en el conjunto de botones y tienen el mismo ancho.

Sintaxis:

<ButtonGroup justified>
      <Button>Some Text</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: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Tendrá el siguiente aspecto.

 

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. En este ejemplo, hemos creado 4 botones justificados con 4 colores diferentes. Estos colores muestran que todos los botones están justificados (igual de ancho).

import React from "react";
import Button from 'rsuite/Button';
import "rsuite/dist/rsuite.min.css";
  
import ButtonGroup from 'rsuite/ButtonGroup';
function App() {
  
    return (
        <div style={{ padding: 10 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
              
            <h3 >
                React Suite Button Justified
            </h3>
              
            <ButtonGroup justified>
                <Button color="orange" appearance="primary">
                    Button 1
                </Button>
                <Button appearance="primary" color="cyan">
                    Button 2
                </Button>
                <Button appearance="primary" color="violet">
                    Button 3
                </Button>
                <Button color="green" appearance="primary">
                    Button 4
                </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, aprenderemos cómo podemos crear iconButtons justificados. Hemos tomado íconos de https://rsuitejs.com/resources/icons/

import React from "react";
import ButtonGroup from 'rsuite/ButtonGroup';
  
import FileUploadIcon from '@rsuite/icons/FileUpload';
import OffRoundIcon from '@rsuite/icons/OffRound';
import SendIcon from '@rsuite/icons/Send';
import "rsuite/dist/rsuite.min.css";
import TrashIcon from '@rsuite/icons/Trash';
import IconButton from 'rsuite/IconButton';
function App() {
  
    return (
        <div style={{ padding: 10 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
              
            <h3 >
                React Suite Button Justified
            </h3>
              
            <ButtonGroup justified>
                <IconButton icon={<SendIcon />} 
                    color="red" appearance="primary">
                    Red
                </IconButton>
                <IconButton icon={<OffRoundIcon />} 
                    appearance="primary" color="cyan">
                    Cyan
                </IconButton>
                <IconButton icon={<TrashIcon />} 
                    appearance="primary" color="blue">
                    Blue
                </IconButton>
                <IconButton icon={<FileUploadIcon />} 
                    color="yellow" appearance="primary">
                    Yellow
                </IconButton>
            </ButtonGroup>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/button/#justified