Composant de liste de conception Ant ReactJS UI

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Ant Design Library a ce composant pré-construit, et il est également très facile à intégrer. Le composant de liste est utilisé pour afficher une liste simple à l’utilisateur, et il peut être utilisé pour afficher un contenu lié à un seul sujet. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design List.

Accessoires de liste :

  • bordé: Il est utilisé pour basculer le rendu de la bordure autour de la liste.
  • la source de données: Il est utilisé pour désigner le tableau DataSource de la liste.
  • bas de page: Il est utilisé pour le rendu de pied de page de liste.
  • la grille: Il est utilisé pour indiquer le type de grille de la liste.
  • entête: Il est utilisé pour le rendu d’en-tête de liste.
  • disposition de l’article : Il est utilisé pour indiquer la disposition de la liste.
  • Chargement en cours: Il est utilisé pour afficher un indicateur de chargement pendant que le contenu de la liste est récupéré.
  • charger plus: Il est utilisé pour afficher beaucoup plus de contenu.
  • lieu: C’est le i18n texte incluant du texte vide.
  • pagination: Il est utilisé pour définir la configuration de Pagination.
  • renderItem : Il est utilisé pour personnaliser les éléments de liste lors de l’utilisation de dataSource.
  • clé de ligne : Il est utilisé pour indiquer la clé unique de l’élément.
  • Taille: Il est utilisé pour indiquer la taille de la liste.
  • diviser: Il est utilisé pour basculer le rendu de la division sous l’élément de liste.

Accessoires de pagination :

  • position: Il est utilisé pour spécifier la position de Pagination.

Grille de liste

  • colonne: Il est utilisé pour désigner la colonne de la grille.
  • gouttière: Il est utilisé pour désigner l’espacement entre la grille.
  • x : Il est utilisé pour la colonne <576px de la grille.
  • nm : Il est utilisé pour la colonne ≥576px de la grille.
  • Maryland: Il est utilisé pour la colonne ≥768px de la grille.
  • lg : Il est utilisé pour la colonne ≥992px de la grille.
  • XL : Il est utilisé pour la colonne ≥1200px de la grille.
  • XXL : Il est utilisé pour la colonne ≥1600px de la grille.

Accessoires List.Item :

  • Actions: Il est utilisé pour indiquer le contenu de l’action des éléments de la liste.
  • En plus: Il est utilisé pour indiquer le contenu supplémentaire de l’élément de liste.

List.Item.Meta Props :

  • avatar: Il est utilisé pour désigner l’avatar de l’élément de liste
  • la description: Il est utilisé pour indiquer la description de l’élément de liste.
  • Titre: Il est utilisé pour indiquer le titre de l’élément de la liste.

Création de l’application React et installation du module :

  • Étape 1: Créez une application React à l’aide de la commande suivante :

    npx create-react-app foldername
  • Étape 2: Après avoir créé votre dossier de projet, c’est-à-dire le nom du dossier, déplacez-vous dessus à l’aide de la commande suivante :

    cd foldername
  • Étape 3: Après avoir créé l’application ReactJS, installez le obligatoire module à l’aide de la commande suivante :

    npm install antd

Structure du projet : Cela ressemblera à ce qui suit.

ProjectStructure

Structure du projet

Exemple: Maintenant, écrivez le code suivant dans le App.js dossier. Ici, App est notre composant par défaut où nous avons écrit notre code.

App.js

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>

  );

}

Étape pour exécuter l’application : Exécutez l’application à l’aide de la commande suivante à partir du répertoire racine du projet :

npm start

Production: Ouvrez maintenant votre navigateur et accédez à http://localhost:3000/vous verrez la sortie suivante :

11

Référence: https://ant.design/components/list/

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *