Composant de menu 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 Menu est utilisé pour afficher un menu polyvalent pour la navigation fins. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant de menu Ant Design.

Accessoires de menu :

  • defaultOpenKeys : Il est utilisé pour désigner le tableau avec les touches des sous-menus ouverts par défaut.
  • defaultSelectedKeys : Il est utilisé pour désigner le tableau avec les clés des éléments de menu sélectionnés par défaut.
  • développerIcône : Il est utilisé pour transmettre l’icône de développement personnalisée du sous-menu.
  • forceSubMenuRender : Il est utilisé pour forcer le sous-menu de rendu dans DOM avant qu’il ne devienne visible.
  • inlineCollapsed : Il est utilisé pour spécifier l’état réduit lorsque le menu est en mode en ligne.
  • inlineIndent : Il est utilisé pour indiquer le retrait des éléments de menu en ligne à chaque niveau en pixels.
  • mode: Il est utilisé pour indiquer le type de menu.
  • plusieurs: Il est utilisé pour permettre la sélection de plusieurs éléments.
  • openKeys : Il est utilisé pour désigner le tableau avec les touches des sous-menus actuellement ouverts.
  • DébordéIndicateur : Il est utilisé pour passer l’icône personnalisée lorsque le menu est réduit.
  • sélectionnable : Il est utilisé pour permettre la sélection d’éléments de menu.
  • clés sélectionnées : Il est utilisé pour désigner le tableau avec les touches des éléments de menu actuellement sélectionnés.
  • style: Il est utilisé pour définir le style du nœud racine.
  • subMenuCloseDelay : Il indique le délai en secondes pour masquer le sous-menu lorsque la souris quitte.
  • subMenuOpenDelay : Il indique le délai en secondes pour afficher le sous-menu lorsque la souris entre.
  • thème: Il est utilisé pour définir le thème de couleur du menu.
  • triggerSubMenuAction : Il s’agit d’une fonction de rappel qui peut déclencher l’ouverture/fermeture d’un sous-menu.
  • sur clic: C’est une fonction de rappel qui est appelée lorsqu’un élément de menu est cliqué.
  • onDésélectionner : C’est une fonction de rappel qui est appelée lorsqu’un élément de menu est désélectionné.
  • onOpenChange : C’est une fonction de rappel qui est appelée lorsque des sous-menus sont ouverts ou fermés.
  • surSélectionner : C’est une fonction de rappel qui est appelée lorsqu’un élément de menu est sélectionné.

Accessoires de menu.Item :

  • danger: Il est utilisé pour afficher le style de danger.
  • désactivé: Il est utilisé pour indiquer si l’élément de menu est désactivé ou non.
  • icône: Il est utilisé pour passer l’icône de l’élément de menu.
  • clé: Il est utilisé pour indiquer l’identifiant unique de l’élément de menu.
  • Titre: Il est utilisé pour définir le titre d’affichage de l’élément réduit.

Accessoires de menu.sous-menu :

  • enfants: Il est utilisé pour désigner les sous-menus ou les éléments de sous-menu.
  • désactivé: Il est utilisé pour indiquer si le sous-menu est désactivé ou non.
  • icône: Il sert à passer l’icône du sous-menu.
  • clé: Il est utilisé pour indiquer l’identifiant unique du sous-menu.
  • popupClassName : Il est utilisé pour indiquer le nom de la classe du sous-menu.
  • popupOffset : Il est utilisé pour indiquer le décalage du sous-menu.
  • Titre: Il est utilisé pour indiquer le titre du sous-menu.
  • onTitleClick : C’est une fonction de rappel qui est déclenchée lorsque le titre du sous-menu est cliqué.

Accessoires de menu.ItemGroup :

  • enfants: Il est utilisé pour désigner les éléments du sous-menu.
  • Titre: Il est utilisé pour désigner le titre du groupe.

Diviseur.de.menu : Il est utilisé comme annonceligne de séparation entre les éléments de menu. Cette composant n’est utilisé que dans le menu contextuel vertical ou le menu déroulant.

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

 

const { SubMenu } = Menu;

 

export default function App() {

 

  return (

    <div style={{

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

    }}>

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

      <Menu

        defaultOpenKeys={['1']}

        defaultSelectedKeys={['1']}

        style={{ width: 300 }}

        mode="inline"

      >

        <SubMenu key="1" title="Settings">

          <Menu.Item key="2">Option 1</Menu.Item>

          <Menu.Item key="3">Option 2</Menu.Item>

          <SubMenu key="4" title="Sub-Menu">

            <Menu.Item key="5">Option 3</Menu.Item>

            <Menu.Item key="6">Option 4</Menu.Item>

          </SubMenu>

        </SubMenu>

        <SubMenu key="7" title="Profile">

          <Menu.Item key="8">Option 5</Menu.Item>

          <Menu.Item key="9">Option 6</Menu.Item>

          <Menu.Item key="10">Option 7</Menu.Item>

          <Menu.Item key="11">Option 8</Menu.Item>

        </SubMenu>

      </Menu>

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

ReactApp3

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

Laisser un commentaire

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