ReactJS UI Ant Design Composant déroulant

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éroulant est utilisé pour fournir un menu déroulant liste, et il est utilisé lorsque l’utilisateur a plus que quelques options à choisir. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant déroulant Ant Design.

Accessoires déroulants :

  • La Flèche: Il est utilisé pour indiquer si la flèche déroulante doit être visible ou non.
  • désactivé: Il est utilisé pour indiquer si le menu déroulant est désactivé ou non.
  • getPopupContainer : Il est utilisé pour définir le conteneur du menu déroulant.
  • recouvrir: C’est le menu déroulant.
  • overlayClassName : Il est utilisé pour transmettre le nom de classe de l’élément racine de la liste déroulante.
  • style de superposition : Il est utilisé pour le style de l’élément racine de la liste déroulante.
  • placement: Il est utilisé pour le placement du menu contextuel.
  • gâchette: C’est le mode de déclenchement qui exécute l’action déroulante.
  • visible: Il est utilisé pour indiquer si le menu déroulant est actuellement visible ou non.
  • onVisibleChange : C’est une fonction de rappel qui est appelée lorsque l’état visible est modifié.

Accessoires du bouton déroulant :

  • boutonsRender : Il est utilisé pour les boutons personnalisés dans Dropdown.Button.
  • désactivé: Il sert à indiquer si le menu déroulant est désactivé ou non
  • icône: Il sert à passer l’Icône qui apparaît à droite.
  • recouvrir: C’est le menu déroulant.
  • placement: Il est utilisé pour le placement du menu contextuel.
  • Taille: Il est utilisé pour indiquer la taille du bouton.
  • gâchette: C’est le mode de déclenchement qui exécute l’action déroulante.
  • taper: Il est utilisé pour indiquer le type de bouton.
  • visible: Il est utilisé pour indiquer si le menu déroulant est actuellement ou non.
  • sur clic: C’est une fonction de rappel qui est appelée lorsque vous cliquez sur le bouton de gauche.
  • onVisibleChange : C’est une fonction de rappel qui est appelée lorsque l’état visible est modifié.

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 { Menu, Dropdown } from 'antd';

 

export default function App() {

 

  return (

    <div style={{

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

    }}>

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

      <>

        <Dropdown

          overlay={(

            <Menu>

              <Menu.Item key="0">

                Menu Item One

              </Menu.Item>

              <Menu.Item key="1">

              Menu Item Two

              </Menu.Item>

              <Menu.Item key="1">

              Menu Item Three

              </Menu.Item>

            </Menu>

          )}

          déclencheur={['click']}>

          <a className="ant-dropdown-link"

             onClick={e => e.preventDefault()}>

            Open Dropdown

          </a>

        </Dropdown>

      </>

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

ReactApp1

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

Laisser un commentaire

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