Reactstrap es una biblioteca de interfaz de usuario de reacción basada en 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 Card Component en ReactJS MDBootstrap.
Una tarjeta es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización. Reemplaza los paneles de uso, pozos y miniaturas. Como todo se puede usar en un solo contenedor llamado tarjeta.
Propiedades:
- tag: Se utiliza para definir etiquetas en Cards.
- className: Se utiliza para definir una clase personalizada a Cards.
- border: Se utiliza para establecer el borde de las cartas.
- sombra: Se utiliza para configurar la sombra de las cartas.
- fondo: se utiliza para establecer el color de fondo de las tarjetas.
- alineación: Se utiliza para establecer la alineación del texto dentro de las tarjetas.
Sintaxis:
<MDBCard> GeeksforGeeks </MDBCard>
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 módulo Tarjeta
App.js
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardImage,
MDBBtn
} from "mdb-react-ui-kit";
export default function App() {
return (
<center>
<MDBCard style={{ maxWidth: "15rem" }}>
<MDBCardImage
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220106105832/gfg200X2001.png"
position="top"
/>
<MDBCardBody>
<MDBCardTitle>GeeksforGeeks</MDBCardTitle>
<MDBCardText>
Reactstrap is a bootstrap based
react UI library that is used to
make good looking webpages with
its seamless and easy to use
component.
</MDBCardText>
<MDBBtn href="www.geeksforgeeks.org">Button</MDBBtn>
</MDBCardBody>
</MDBCard>
</center>
);
}
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo usar el encabezado y el pie de página en un componente de tarjeta.
App.js
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardHeader,
MDBCardFooter
} from "mdb-react-ui-kit";
export default function App() {
return (
<center>
<br/>
<MDBCard style={{ maxWidth: "15rem" }}>
<MDBCardHeader>Card Header</MDBCardHeader>
<MDBCardBody>
<MDBCardTitle>GeeksforGeeks</MDBCardTitle>
<MDBCardText>
Reactstrap is a bootstrap based
react UI library that is used to
make good looking webpages with
its seamless and easy to use
component.
</MDBCardText>
</MDBCardBody>
<MDBCardFooter >Card Footer</MDBCardFooter>
</MDBCard>
</center>
);
}
Producción:
Ejemplo 3: En este ejemplo, sabremos cómo usar la propiedad de borde en un componente Tarjeta.
App.js
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardHeader,
MDBCardFooter
} from "mdb-react-ui-kit";
export default function App() {
return (
<center>
<br/>
<MDBCard style={{ maxWidth: "15rem" }} border='danger'>
<MDBCardHeader>Danger Border</MDBCardHeader>
<MDBCardBody>
<MDBCardTitle>GeeksforGeeks</MDBCardTitle>
<MDBCardText>
Reactstrap is a bootstrap based
react UI library that is used to
make good looking webpages with
its seamless and easy to use
component.
</MDBCardText>
</MDBCardBody>
</MDBCard>
</center>
);
}
Producción:
Referencia: https://mdbootstrap.com/docs/b5/react/components/cards/