ReactJS MDBootstrap Grupo de botones Componente

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar.

En este artículo sabremos cómo usar el componente de grupo de botones en ReactJS MDBootstrap. El componente de grupo de botones se utiliza para mostrar un grupo de botones en una serie.

Propiedades:

• tag: Se utiliza para definir etiquetas en los botones.
• className: los usuarios pueden definir una clase personalizada para un botón.
• tamaño: Se utiliza para establecer el tamaño del botón.
• sombra: se utiliza para configurar la sombra del grupo de botones.
• vertical: se utiliza para hacer que el grupo de botones sea vertical.
• barra de herramientas: Se utiliza para hacer una barra de herramientas.

Sintaxis:

<MDBBtnGroup>
 <MDBBtn>
  GeeksforGeeks
 </MDBBtn>
</MDBBtnGroup>

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, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

 npm i mdb-ui-kit
 npm i mdb-react-ui-kit

Paso 4: Importe el elemento que se utilizará en el proyecto.

import { MDBBtnGroup } from 'mdb-react-ui-kit'

Estructura del proyecto : Se verá como lo siguiente.

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

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de grupo de botones.

import React from 'react';
import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Button group component</h4>
      <br/>
      <MDBBtnGroup>
        <MDBBtn color='success'>Click here!</MDBBtn>
        <MDBBtn disabled color='primary'>Click here!</MDBBtn>
        <MDBBtn outline color='info'>Click here!</MDBBtn>
      </MDBBtnGroup>
    </div>  
  );
}

#gfg{
  margin: 40px;
}

Producción: 

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de tamaño en un componente de grupo de botones.

import React from 'react';
import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Button group component</h4>
      <br/>
      <MDBBtnGroup size='lg'>
        <MDBBtn color='success'>Click here!</MDBBtn>
        <MDBBtn disabled color='primary'>Click here!</MDBBtn>
        <MDBBtn outline color='info'>Click here!</MDBBtn>
      </MDBBtnGroup>
      <br/>
      <br/>
      <MDBBtnGroup>
        <MDBBtn color='success'>Click here!</MDBBtn>
        <MDBBtn disabled color='primary'>Click here!</MDBBtn>
        <MDBBtn outline color='info'>Click here!</MDBBtn>
      </MDBBtnGroup>
      <br/>
      <br/>
      <MDBBtnGroup size='sm'>
        <MDBBtn color='success'>Click here!</MDBBtn>
        <MDBBtn disabled color='primary'>Click here!</MDBBtn>
        <MDBBtn outline color='info'>Click here!</MDBBtn>
      </MDBBtnGroup>
    </div>  
  );
}

#gfg{
  margin: 40px;
}

Producción:

Ejemplo 3: En este ejemplo, sabremos cómo usar la propiedad vertical en un componente de grupo de botones.

import React from 'react';
import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Button group component</h4>
      <br/>
      <MDBBtnGroup size='lg' vertical>
        <MDBBtn color='success'>Click here!</MDBBtn>
        <MDBBtn disabled color='primary'>Click here!</MDBBtn>
        <MDBBtn outline color='info'>Click here!</MDBBtn>
        <MDBBtn color='danger'>Click here!</MDBBtn>
        <MDBBtn disabled color='warning'>Click here!</MDBBtn>
        <MDBBtn outline color='dark'>Click here!</MDBBtn>
      </MDBBtnGroup>
    </div>  
  );
}

#gfg{
  margin: 40px;
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/components/button-group