Composant de radio Windows de bureau React

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. La composante radio est utilisée pour permettre aux utilisateurs de sélectionner une option dans un ensemble. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant React Desktop Windows Radio.

Accessoires radio :

  • Couleur: Il est utilisé pour définir la couleur de la radio.
  • valeur par défaut: Il est utilisé pour indiquer la valeur d’entrée par défaut.
  • coché par défaut : Il sert à indiquer si la radio est cochée par défaut ou non.
  • caché: Il est utilisé pour définir la visibilité d’un composant.
  • étiquette: Il est utilisé pour ajouter une étiquette pour la radio.
  • Nom: Il est utilisé pour indiquer le nom de l’entrée.
  • sur le changement: C’est une fonction de rappel qui est déclenchée lorsque la case à cocher a changé.
  • 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.

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

 

export default function App() {

  return (

    <div style={{

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

    }}>

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

      What is your Age ?

      <Radio

        label="Above 50"

        name="ageRadio"

        defaultChecked

      /> 

      <Radio

        label="Below 50"

        name="ageRadio"

      />

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

Laisser un commentaire

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