Componente de lista de diseño de Ant de ReactJS UI

. El componente de lista se usa para mostrar una lista simple al usuario, y se puede usar. Podemos usar el siguiente enfoque en ReactJS para usar el componente de lista de diseño Ant.

Lista de accesorios:

• bordered: se utiliza para alternar la representación del borde alrededor de la lista.  
• dataSource: se utiliza para indicar la array DataSource de la lista.  
• pie de página: se utiliza para el renderizador de pie de página de lista.  
• grilla: se utiliza para indicar el tipo de grilla de la lista.  
• encabezado: se utiliza para el renderizador de encabezado de lista.  
• itemLayout: se utiliza para indicar el diseño de la lista.
• loading: se utiliza para mostrar un indicador de carga mientras se recuperan los contenidos de la lista.
• loadMore: Se utiliza para mostrar una carga más de contenido.  
• configuración regional: es el texto i18n , incluido el texto vacío.  
• paginación: se utiliza para definir la configuración de paginación.
• renderItem: se utiliza para personalizar los elementos de la lista cuando se utiliza el origen de datos.  
• rowKey: se utiliza para indicar la clave única del elemento.
• tamaño: Se utiliza para indicar el tamaño de la lista.
• división: se utiliza para alternar la representación de la división debajo del elemento de la lista.

Accesorios de paginación:

• posición: Se utiliza para especificar la posición de Paginación.

List grid Props:

• columna: Se utiliza para denotar la columna de la grilla. 
• cuneta: Se utiliza para indicar el espacio entre la cuadrícula.
• xs: se utiliza para la columna <576px de la cuadrícula.
• sm: se utiliza para la columna ≥576px de la cuadrícula.
• md: se utiliza para la columna ≥768px de la cuadrícula.
• lg: se utiliza para la columna ≥992px de la cuadrícula.
• xl: se utiliza para la columna ≥1200px de la cuadrícula.
• xxl: se utiliza para la columna ≥1600px de la cuadrícula.

List.Item Props:

• acciones: se utiliza para indicar el contenido de la acción de los elementos de la lista.  
• extra: se utiliza para indicar el contenido adicional del elemento de la lista. 

List.Item.Meta Props:

• avatar: se utiliza para indicar el avatar del elemento de la lista
• descripción: se utiliza para indicar la descripción del elemento de la lista.
• título: se utiliza para denotar el título del elemento de la lista.

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 { List } from 'antd';
  
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design List Component</h4>
      <List
        header={<div>Sample HEADER</div>}
        footer={<div>Sample FOOTER</div>}
        bordered
        dataSource={[
          'Sample Line 1',
          'Sample Line 2',
          'Sample Line 3',
          'Sample Line 4',
        ]}
        renderItem={item => (
          <List.Item>
            {item}
          </List.Item>
        )}
      />
    </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/list/