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 botones en ReactJS MDBootstrap.
El componente Botones se utiliza para mostrar un grupo de botones.
Propiedades:
- tag: Se utiliza para definir etiquetas en los botones.
- className: el usuario puede definir una clase personalizada para un botón.
- color: Se utiliza para añadir color a un botón.
- contorno: Se utiliza para establecer o eliminar el contorno.
- redondeado: Se utiliza para hacer un botón redondeado.
- disabled: se usa para hacer un botón deshabilitado.
- flotante: se utiliza para hacer un botón en forma de círculo.
- tamaño: se utiliza para establecer el tamaño del botón.
- bloque: se usa para hacer un botón estilo bloque.
- active: se utiliza para activar un botón.
- alternar: podemos usar la propiedad alternar para cambiar el estado del botón.
- noRipple: se utiliza para eliminar la onda flotante.
Sintaxis:
<MDBBtn> GeeksforGeeks </MDBBtn>
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 { MDBBtn } 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 módulo Button
App.js
import React from 'react'; import { MDBBtn } from 'mdb-react-ui-kit'; export default function App() { return ( <div id='gfg'> <h2>GeeksforGeeks</h2> <h4>ReactJS MDBootstrap button component</h4> <MDBBtn color='success'> Clck here!</MDBBtn> <br /> <br /> <MDBBtn outline color='success'> Clck here!</MDBBtn> <br /> <br /> <MDBBtn rounded color='success'> Clck here!</MDBBtn> <br /> <br /> <MDBBtn rounded outline color='success'> Clck here!</MDBBtn> <br /> <br /> <MDBBtn floating color='success'> GFG</MDBBtn> </div> ); }
Index.css
#gfg{ margin: 40px; }
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad deshabilitada en un componente de botón.
App.js
import React from 'react'; import { MDBBtn } from 'mdb-react-ui-kit'; export default function App() { return ( <div id='gfg'> <h2>GeeksforGeeks</h2> <h4>ReactJS MDBootstrap button component</h4> <MDBBtn disabled color='success'> Clck here!</MDBBtn> <br /> <br /> <MDBBtn disabled outline color='success'> Clck here!</MDBBtn> <br /> <br /> <MDBBtn disabled rounded color='success'> Clck here!</MDBBtn> <br /> <br /> <MDBBtn disabled rounded outline color='success'> Clck here!</MDBBtn> <br /> <br /> <MDBBtn disabled floating color='success'> GFG</MDBBtn> </div> ); }
Index.css
#gfg{ margin: 40px; }
Producción:
Referencia: https://mdbootstrap.com/docs/b5/angular/components/buttons/