ReactJS UI Ant Design Tag 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 de balise est utilisé pour la catégorisation ou le balisage. Il est utilisé lorsque nous voulons tag par propriété ou dimension. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design Tag.

Accessoires de balise :

  • fermable : Il est utilisé pour indiquer si le Tag peut être fermé.
  • fermerIcône : Il est utilisé pour définir l’icône de fermeture personnalisée.
  • Couleur: Il est utilisé pour indiquer la couleur de la balise.
  • icône: Il est utilisé pour définir l’icône de la balise.
  • visible: Il est utilisé pour indiquer si le Tag est fermé ou non.
  • onClose : C’est la fonction de rappel qui est déclenchée lorsque le Tag est fermé.

Accessoires Tag.CheckableTag :

  • vérifié: Il est utilisé pour indiquer l’état coché de la balise.
  • sur le changement: C’est la fonction de rappel qui est déclenchée lorsque Tag est coché/décoché.

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 { Tag } from 'antd';

 

export default function App() {

  return (

    <div style={{

      display: 'block', width: 700, padding: 30

    }}>

      <h4>ReactJS Ant-Design Tag Component</h4>

      <Tag>Sample Tag</Tag>

      <Tag closable onClose={() => { console.log("Tag Removed!")}}>

        Closable Tag

    </Tag>

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

ReactApp4

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

Laisser un commentaire

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