Composant de carte 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 la carte est utilisé commeconteneur rectangulaire simple, et il est utilisé lorsque l’utilisateur souhaite afficher un contenu lié à un seul sujet. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design Card.

Accessoires de carte :

  • Actions: Il est utilisé pour désigner la liste d’actions.
  • activeTabKey : Il est utilisé pour indiquer la clé du TabPane actuel.
  • style corporel: Il est utilisé pour désigner le style en ligne à appliquer au contenu de la carte.
  • bordé: Il est utilisé pour basculer le rendu de la bordure autour de la carte.
  • couverture: Il est utilisé pour désigner la couverture de la carte.
  • clé de tabulation active par défaut : Il est utilisé pour désigner la clé du TabPane actif initial.
  • En plus: Il est utilisé pour le contenu à afficher dans le coin supérieur droit de la carte.
  • style de tête : Il est utilisé pour désigner le style Inline à appliquer à la tête de carte.
  • planable : Il est utilisé pour soulever lorsque vous survolez la grille de cartes.
  • Chargement en cours: Il est utilisé pour afficher un indicateur de chargement pendant que le contenu de la carte est récupéré.
  • Taille: Il est utilisé pour indiquer la taille de la carte.
  • tabBarExtraContent : Il est utilisé pour désigner le contenu supplémentaire dans la barre d’onglets.
  • tabList : Il est utilisé pour désigner la liste de la tête de TabPane.
  • tabProps : Il est utilisé pour désigner les accessoires Tab.
  • Titre: Il est utilisé pour indiquer le titre de la carte.
  • taper: Il est utilisé pour désigner le type de style de carte.
  • onTabChange : C’est une fonction de rappel qui est déclenchée lorsque l’onglet est changé.

Accessoires Card.Grid :

  • nom du cours: Il est utilisé pour indiquer le nom de classe du conteneur.
  • planable : Il est utilisé pour soulever lorsque vous survolez la grille de cartes.
  • style: Il est utilisé pour passer l’objet style du conteneur.

Card.Meta Props :

  • avatar: Il est utilisé pour désigner l’avatar ou l’icône.
  • nom du cours: Il est utilisé pour indiquer le nom de classe du conteneur.
  • la description: Il est utilisé pour désigner le contenu de la description.
  • style: Il est utilisé pour passer l’objet style du conteneur.
  • Titre: Il est utilisé pour indiquer le contenu du titre.

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

  );

}

É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 :

1

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

Laisser un commentaire

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