React Desktop Composant Windows NavPane

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

React Desktop est une bibliothèque populaire pour apporter l’expérience de bureau native sur le Web. Cette bibliothèque propose macOS et composants du système d’exploitation Windows. Le composant NavPane est utilisé pour permettre aux utilisateurs de facilement naviguer entre les éléments car il s’agit d’un volet de navigation. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant React Desktop Windows NavPane.

Accessoires NavPane :

  • canPaneToggle : Il permet de définir si le volet peut être compacté.
  • Couleur: Il est utilisé pour définir la couleur du texte.
  • defaultIsPaneExpanded : Il permet de définir si le volet est agrandi par défaut.
  • onPaneToggle : Il s’agit d’une fonction de rappel qui est déclenchée lorsque le volet est compacté ou développé.
  • paneCompactedLength: Il est utilisé pour définir la longueur du volet lorsqu’il est compacté.
  • paneExpandedLength : Il est utilisé pour définir la longueur du volet lorsqu’il est agrandi.
  • thème: Il est utilisé pour définir le thème de l’interface utilisateur et ce thème est ensuite utilisé par ce composant et ses éléments enfants.

Accessoires NavPaneItem :

  • Contexte: Il est utilisé pour définir la couleur de fond.
  • Couleur: Il est utilisé pour définir la couleur du texte.
  • Alignementhorizontal : Il est utilisé pour définir l’alignement horizontal du contenu du composant.
  • icône: Il est utilisé pour définir l’élément icône de l’élément.
  • marge: Il est utilisé pour définir la marge extérieure du composant.
  • surSélectionner : C’est une fonction de rappel qui est déclenchée lorsqu’un élément est sélectionné.
  • rembourrage: Il est utilisé pour définir le rembourrage à l’intérieur d’un composant.
  • pousser: Il est utilisé pour afficher une animation de poussée lorsque le bouton est enfoncé.
  • choisi: Il est utilisé pour indiquer si l’élément est sélectionné ou non.
  • Titre: Il est utilisé pour définir le titre de l’élément.
  • thème: Il est utilisé pour définir le thème de l’interface utilisateur et ce thème est ensuite utilisé par ce composant et ses éléments enfants.
  • alignement vertical: Il est utilisé pour définir l’alignement vertical du contenu du composant.

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 react-desktop

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 { NavPane, NavPaneItem } from 'react-desktop/windows';

 

export default function App() {

  return (

    <div style={{

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

    }}>

      <h4>React Desktop Windows NavPane Component</h4>

      <NavPane push>

        <NavPaneItem

          title="Item One"

          push

        >

        NavItem One

        </NavPaneItem>

        <NavPaneItem

          title="Item Two"

          push>

          NavItem Two

        </NavPaneItem>

        <NavPaneItem

          title="Item Three"

          push>

          NavItem Three

        </NavPaneItem>

      </NavPane>

    </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: http://reactdesktop.js.org/docs/windows/nav-pane

Laisser un commentaire

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