ReactJS UI Ant Diseño Descripciones Componente

. El componente de descripciones se usa para dthe Podemos usar el siguiente enfoque en ReactJS para usar el componente de descripciones de diseño Ant.

Descripciones de accesorios:

• bordered: Se utiliza para indicar si mostrar el borde o no.
• dos puntos: se utiliza para cambiar el valor de los dos puntos de accesorios predeterminados de Descriptions.Item .
• columna: Se utiliza para indicar el número de Descripción . Elementos en una fila.
• contentStyle: Se utiliza para personalizar el estilo de la etiqueta.
• extra: se utiliza para el área de acción de la lista de descripción y se coloca en la posición superior derecha.
• labelStyle: Se utiliza para personalizar el estilo de la etiqueta.
• layout: Se utiliza para definir el layout de la descripción.
• tamaño: Se utiliza para establecer el tamaño de la lista.
• title: Se utiliza para definir el título de la lista de descripción, y se coloca en la parte superior.

Descripciones. Objetos de artículo:

• contentStyle: Se utiliza para personalizar el estilo de la etiqueta.
• etiqueta: Se utiliza para definir la descripción del contenido.
• labelStyle: Se utiliza para personalizar el estilo de la etiqueta.
• span: Se utiliza para indicar el número de columnas incluidas.

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 { Descriptions } from 'antd';
  
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Descriptions Component</h4>
      <Descriptions title="Examination Form">
        <Descriptions.Item label="FullName
        ">Test User</Descriptions.Item>
        <Descriptions.Item label="PhoneNumber">12345678910</Descriptions.Item>
        <Descriptions.Item label="Age">23</Descriptions.Item>
        <Descriptions.Item label="DOB">23 oct 1998</Descriptions.Item>
        <Descriptions.Item label="ExamCenter">High school, Near AB road, MP
        </Descriptions.Item>
      </Descriptions>
    </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/descriptions/