ReactJS UI Ant Design Collapse 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 d’effondrement est utilisé comme aczone de contenu ce peut être replié et étendu. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design Collapse.

Réduire les accessoires :

  • accordéon: Il est utilisé pour réduire les rendus en accordéon si cette valeur est définie sur true.
  • clé active : Il est utilisé pour désigner la touche du panneau actif.
  • bordé: Il est utilisé pour basculer le rendu de la bordure autour du bloc de réduction.
  • pliant: Il est utilisé pour spécifier si le panneau d’enfants ou la zone de déclenchement doit être repliable ou non.
  • cléActive par défaut : Il est utilisé pour désigner la clé du panneau actif initial.
  • destroyInactivePanel : Il est utilisé pour détruire le panneau inactif.
  • développerIcône : Il est utilisé pour permettre la personnalisation de l’icône de réduction.
  • expandIconPosition : Il est utilisé pour définir la position de l’icône d’expansion.
  • fantôme: Il est utilisé pour rendre l’arrière-plan de l’effondrement transparent et sans bordure.
  • sur le changement: C’est une fonction de rappel qui est déclenchée lorsque le panneau actif est changé.

Collapse.Panel Props

  • pliant: Il est utilisé pour spécifier si le panneau ou la zone de déclenchement doit être repliable ou non.
  • En plus: Il est utilisé pour désigner l’élément supplémentaire dans le coin.
  • forceRender : Lorsque vous cliquez sur l’en-tête, il est utilisé pour forcer le rendu du contenu sur le panneau, au lieu du rendu paresseux.
  • entête: Il est utilisé pour définir le titre du panneau.
  • clé: C’est la clé unique d’identification du panneau.
  • afficherFlèche : Si vrai, il affichera une icône de flèche.

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

 

const { Panel } = Collapse;

 

export default function App() {

  return (

    <div style={{

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

    }}>

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

      <Collapse>

        <Panel header="GeeksforGeeks" key="1">

           

<p>Greetings from GeeksforGeeks</p>

 

        </Panel>

        <Panel header="Computer Science" key="2">

           

<p>This is Best computer Science Portal</p>

 

        </Panel>

      </Collapse>

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

ReactApp5

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

Laisser un commentaire

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