ReactJS UI Ant Design Descriptions Component

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 descriptions est utilisé pour dafficher plusieurs champs en lecture seule dans des groupes. Ce composant est couramment utilisé sur la page de détails pour la application. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design Descriptions.

Accessoires de description :

  • bordé: Il est utilisé pour indiquer s’il faut afficher ou non la bordure.
  • côlon: Il est utilisé pour changer la valeur des accessoires par défaut deux-points de Descriptions.Item.
  • colonne: Il est utilisé pour indiquer le nombre de Description.Articles dans une rangée.
  • style de contenu : Il est utilisé pour personnaliser le style de l’étiquette.
  • En plus: Il est utilisé pour la zone d’action de la liste de description et il est placé en haut à droite.
  • style d’étiquette : Il est utilisé pour personnaliser le style de l’étiquette.
  • disposition: Il est utilisé pour définir la mise en page de la description.
  • Taille: Il est utilisé pour définir la taille de la liste.
  • Titre: Il est utilisé pour définir le titre de la liste de description, et il est placé en haut.

Descriptions.Accessoires d’article :

  • style de contenu : Il est utilisé pour personnaliser le style de l’étiquette.
  • étiquette: Il est utilisé pour définir la description du contenu.
  • style d’étiquette : Il est utilisé pour personnaliser le style de l’étiquette.
  • envergure: Il est utilisé pour indiquer le nombre de colonnes incluses.

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 { 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>

  );

}

É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/descriptions/

Laisser un commentaire

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