Componente de tarjeta de diseño de hormiga ReactJS UI

. El componente de tarjeta se usa como un sPodemos usar el siguiente enfoque en ReactJS para usar el componente de tarjeta Ant Design.

Accesorios de la tarjeta:

• acciones: Se utiliza para indicar la lista de acciones.
• activeTabKey: se utiliza para indicar la clave del TabPane actual.
• bodyStyle: se utiliza para indicar el estilo en línea que se aplicará al contenido de la tarjeta.
• bordeado: se utiliza para alternar la representación del borde alrededor de la tarjeta.
• portada: Se utiliza para denotar la portada de la Tarjeta.
• defaultActiveTabKey: se utiliza para indicar la clave del TabPane activo inicial.
• extra: Se utiliza para que el Contenido se represente en la esquina superior derecha de la tarjeta.
• headStyle: se utiliza para indicar el estilo en línea que se aplicará a la cabeza de la tarjeta.
• Hoverable: se usa para levantar cuando se desplaza la cuadrícula de la tarjeta.
• loading: Se utiliza para mostrar un indicador de carga mientras se recupera el contenido de la tarjeta.
• tamaño: Se utiliza para indicar el tamaño de la tarjeta.
• tabBarExtraContent: se utiliza para indicar el contenido adicional en la barra de pestañas.
• tabList: se utiliza para indicar la lista de encabezado de TabPane.
• tabProps: se utiliza para indicar los accesorios de tabulación.
• title: Se utiliza para denotar el título de la Tarjeta.
• tipo: se utiliza para indicar el tipo de estilo de tarjeta.
• onTabChange: es una función de devolución de llamada que se activa cuando se cambia la pestaña.

Accesorios de cuadrícula de tarjetas:

• className: se utiliza para indicar el className del contenedor.
• Hoverable: se usa para levantar cuando se desplaza la cuadrícula de la tarjeta.
• style: Se utiliza para pasar el objeto de estilo del contenedor.

Accesorios de la tarjeta.Meta:

• avatar: Se utiliza para denotar el Avatar o icono.
• className: se utiliza para indicar el className del contenedor.
• descripción: Se utiliza para denotar el contenido de la descripción.
• style: Se utiliza para pasar el objeto de estilo del contenedor.
• título: Se utiliza para denotar el contenido del título.

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 antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: 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.

import React from 'react'
import "antd/dist/antd.css";
import { Card } from 'antd';
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Card Component</h4>
      <>
        <Card title="Card title" bordered
          style={{
            width: 500,
            border: '2px solid black'
          }}>
          <p>Sample Card Content 1</p>
  
          <p>Sample Card Content 2</p>
  
          <p>Sample Card Content 3</p>
  
        </Card>
      </>
    </div>
  );
}

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:

Referencia: https://ant.design/components/card/