Morioh
Login
Thadée Cisowski

Thadée Cisowski

6 months ago

Comment implémenter et personnaliser le composant Checkbox dans React

Une case à cocher personnalisée est une case à cocher qui a été modifiée par rapport à son apparence par défaut pour mieux répondre aux besoins d'une conception ou d'une interface utilisateur particulière. Cela peut être fait de plusieurs manières, par exemple en modifiant la couleur, la taille ou la forme de la case à cocher, ou en ajoutant des éléments supplémentaires tels que des icônes ou des bordures.


Dans ce didacticiel, nous apprendrons comment implémenter une liste de cases à cocher simple avec plusieurs options dans l'application React JS à l'aide du composant de case à cocher React Material UI dans un composant fonctionnel.

Table des matières

  • Étape 1 : Créer l'application React
  • Étape 2 : Enregistrez l'interface utilisateur de React Material
  • Étape 3 : Créer un composant de fonction
  • Étape 4 : Créer le composant de case à cocher React
  • Étape 5 : Enregistrez le composant dans l'application
  • Étape 6 : tester l'application sur le navigateur

Aperçu:

Tutoriel de création et de personnalisation de cases à cocher de React Material UI

 

 

Étape 1 : Créer l'application React

Nous allons suivre la manière conventionnelle de créer une nouvelle application React. Accédez simplement au terminal, ouvrez l’écran de la console, tapez la commande et appuyez sur Entrée.

Assurez-vous d'avoir installé Node et Npm sur votre système de développement.

npx create-react-app react-blog-app

Accédez à la racine du projet :

cd react-blog-app

Étape 2 : Enregistrez l'interface utilisateur de React Material

Afin de configurer l'interface utilisateur matérielle, nous devons installer l'interface utilisateur matérielle React, les packages de style et de polices dans l'application React.

npm i @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @fontsource/roboto --legacy-peer-deps

Dès que les packages impératifs sont installés, il faut importer les polices CSS dans le fichier App.css.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

Étape 3 : Créer un composant de fonction

Un composant de fonction n'est qu'une autre fonction JavaScript ; Il contrôle la fonctionnalité particulière associée au composant fonctionnel lui-même.

Allez-y et créez le répertoire components/, et créez également le Users.js.

import React from 'react'
function Users() {
  return (
    <div>Users page</div>
  )
}
export default Users

Étape 4 : Créer le composant de case à cocher React

Nous avons importé les modules Checkbox, Icon et Color ; à l'intérieur de la méthode de retour, nous définissons le composant Checkbox. Nous avons créé la Checkbox avec différentes tailles, couleurs et icônes dans React.

Insérez le code dans le fichier components/Users.js.

import * as React from "react";
import { pink } from "@mui/material/colors";
import Checkbox from "@mui/material/Checkbox";
import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
import BookmarkIcon from "@mui/icons-material/Bookmark";
const label = { inputProps: { "aria-label": "Checkbox demo" } };
function Users() {
  return (
    <div>
      <Checkbox {...label} defaultChecked />
      <Checkbox {...label} defaultChecked color="secondary" />
      <Checkbox {...label} defaultChecked color="success" />
      <Checkbox
        {...label}
        icon={<BookmarkBorderIcon />}
        checkedIcon={<BookmarkIcon />}
      />
      <Checkbox
        {...label}
        defaultChecked
        sx={{
          color: pink[800],
          "&.Mui-checked": {
            color: pink[600],
          },
          "& .MuiSvgIcon-root": { fontSize: 50 },
        }}
      />
    </div>
  );
}
export default Users;

Étape 5 : Enregistrer le composant dans l'application

Si vous avez déjà parcouru toutes les étapes, cela signifie que vous avez développé avec succès le composant case à cocher.

Enregistrons le composant User dans le fichier App.js.

import React from "react";
import Users from "./components/Users";
function App() {
  return (
    <div>
      <h2>React Material UI Customize Checkbox Example</h2>
      <Users />
    </div>
  );
}
export default App;

Étape 6 : Tester l'application sur le navigateur

Nous avons mentionné une seule commande ci-dessous, elle est nécessaire pour exécuter le serveur React.

Maintenant, vous pouvez démarrer l'application et la visualiser sur le navigateur.

npm start
http://localhost:3000

Conclusion

Dans toutes les sections précédentes, nous avons passé en revue la manière simple mais conventionnelle de créer le composant case à cocher dans React.

4.50 GEEK