Composant d’info-bulle ReactJS UI Ant Design

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 d’info-bulle est utilisé pour afficher le informations sous forme de texte lorsque les utilisateurs se concentrent sur, survolent ou appuient sur un élément. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design Tooltip.

Accessoires d’info-bulle :

  • Titre: Il est utilisé pour décrire le texte affiché dans l’info-bulle.

Accessoires communs : Voici quelques accessoires communs partagés par Info-bulle Popover et Popconfirmer.

  • aligner: Il est utilisé pour fusionner cette valeur dans la configuration du placement.
  • flèchePointAuCentre : Il est utilisé pour indiquer si la flèche pointe vers le centre de la cible.
  • AutoAdjustOverflow : Il est utilisé pour indiquer s’il faut ajuster automatiquement le placement de la fenêtre contextuelle lorsque la fenêtre contextuelle est hors écran.
  • Couleur: Il est utilisé pour définir la couleur de fond.
  • par défautVisible : Il est utilisé pour indiquer si la carte d’info-bulle flottante est visible par défaut ou non.
  • destroyTooltipOnHide : Il est utilisé pour indiquer si l’info-bulle est détruite lorsqu’elle est masquée.
  • getPopupContainer : C’est le conteneur DOM de la pointe.
  • mouseEnterDelay : Il s’agit de la valeur du délai en secondes avant que l’info-bulle ne s’affiche à l’entrée de la souris.
  • mouseLeaveDelay : Il s’agit de la valeur du délai en secondes avant que l’info-bulle ne soit masquée lors du départ de la souris.
  • overlayClassName : Il est utilisé pour transmettre le nom de classe de la carte d’info-bulle.
  • style de superposition : Il est utilisé pour le style de la carte d’info-bulle.
  • placement: Il est utilisé pour positionner l’info-bulle par rapport à la cible.
  • gâchette: Il est utilisé pour le mode de déclenchement des info-bulles.
  • visible: Il est utilisé pour indiquer si la carte d’info-bulle flottante est visible ou non.
  • zIndex : Il est utilisé pour indiquer le z-index de configuration de l’info-bulle.
  • onVisibleChange : Il s’agit d’une fonction de rappel qui se déclenche lorsque la visibilité de la fiche d’info-bulle est modifiée.

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 { Tooltip, Button } from 'antd';

 

export default function App() {

  return (

    <div style={{

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

    }}>

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

      <Tooltip placement="bottom" title={"Hii, I am sample tooltip."}>

        <Button>Over me to see tooltip information!</Button>

      </Tooltip>

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

Laisser un commentaire

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