Barra de herramientas del botón 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 la barra de herramientas del botón de la suite React. Una barra de herramientas de botones consta de una combinación de grupos de botones para crear una barra de herramientas de botones para componentes más complejos.

Accesorios de botón:

• active : Cambia el estado del botón a activo.
• apariencia : Denota la apariencia del botón.
• as : se utiliza para agregar un elemento personalizado a un botón.
• block : se utiliza para abarcar todo el ancho del elemento principal del botón.
• children : Denota el contenido primario.
• classPrefix : Denota el prefijo de la clase CSS del componente.
• color : Denota el color del botón.
• disabled : Cambia el estado del botón a deshabilitado.
• href : se utiliza para proporcionar un atributo href.
• loading : Muestra un indicador de carga.
• tamaño : Denota el tamaño del botón.

Accesorios de IconButton:

• círculo : se utiliza para configurar el botón de círculo.
• classPrefix : indica el prefijo de la clase CSS del componente.
• icon – Se utiliza para configurar el icono del botón.
• ubicación : establece la ubicación del icono.

Accesorios de grupo de botones:

• bloque – Muestra los grupos de botones de bloque.
• classPrefix : indica el prefijo de la clase CSS del componente.
• justificado – Establece el diseño de ancho constante horizontal.
• tamaño – Establece el tamaño del botón.
• vertical – Establece los diseños verticales de los botones.

Sintaxis:

 <ButtonToolbar>
    <IconButton />
        ...
    <ButtonGroup>
           ...
    </ButtonGroup>
</ButtonToolbar>

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 la barra de herramientas básica de botones.

import "rsuite/dist/rsuite.min.css";
import { Button, ButtonToolbar, ButtonGroup } from "rsuite";
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>    
                    React Suite Button Toolbar</h4>
  
                <div style={{ marginTop: 20, width: 400 }}>
                    <ButtonToolbar>
                        <Button>Prev</Button>
                        <ButtonGroup>
                            <Button style={{ marginRight: 10 }}>
                                1</Button>
                            <Button style={{ marginRight: 10 }}>
                                2</Button>
                            <Button style={{ marginRight: 10 }}>
                                3</Button>
                            <Button style={{ marginRight: 10 }}>
                                4</Button>
                            <Button style={{ marginRight: 10 }}>
                                5</Button>
                            <Button>6</Button>
                        </ButtonGroup>
                        <Button>Next</Button>
                    </ButtonToolbar>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra la barra de herramientas de botones de colores con iconos.

import "rsuite/dist/rsuite.min.css";
import { ButtonToolbar, ButtonGroup, IconButton } from "rsuite";
import AlignLeft from "@rsuite/icons/legacy/AlignLeft";
import AlignCenter from "@rsuite/icons/legacy/AlignCenter";
import AlignRight from "@rsuite/icons/legacy/AlignRight";
import AlignJustify from "@rsuite/icons/legacy/AlignJustify";
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Button Toolbar</h4>
  
                <div style={{ marginTop: 20, width: 400 }}>
                    <h5>Alignment</h5>
                    <ButtonToolbar>
                        <ButtonGroup>
                            <IconButton style={{ marginRight: 10 }} 
                                color="red" appearance="primary" 
                                icon={<AlignLeft />} />
                            <IconButton style={{ marginRight: 10 }} 
                                color="green" appearance="primary" 
                                icon={<AlignCenter />} />
                            <IconButton style={{ marginRight: 10 }} 
                                color="yellow" appearance="primary" 
                                icon={<AlignRight />} />
                            <IconButton color="blue" appearance="primary" 
                                icon={<AlignJustify />} />
                        </ButtonGroup>
                    </ButtonToolbar>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/button/#button-toolbar