Comment vérifier quel onglet est actif à l'aide de Material UI ?

Material-UI fournit divers composants pour nous aider à créer des interfaces utilisateur avec une apparence cohérente. L'un des composants fournis par Material-UI est le composant Tabs, qui nous permet de créer des interfaces à onglets dans nos applications. Dans ce didacticiel, nous apprendrons comment vérifier quel onglet est actif à l'aide de la populaire bibliothèque React UI Material-UI.

Utilisez le hook useState pour vérifier quel onglet est actif

Les utilisateurs peuvent suivre les étapes ci-dessous pour vérifier quel onglet est actif à l'aide de Material UI.

Étape 1 - Tout d'abord, l'utilisateur doit installer Material-UI. Nous pouvons le faire en exécutant la commande suivante -

npm install @mui/material @emotion/react @emotion/styled

Étape 2 - Importez les onglets et les composants d'onglets. Nous pouvons le faire en ajoutant la ligne de code suivante en haut du fichier du composant -

import { Tabs, Tab } from '@mui/material'; 

Étape 3 - Créez un statut pour suivre les onglets actifs. Nous pouvons le faire en utilisant le hook useState dans React. Voici un exemple de création d'une variable d'état nommée valeur -

const [value, setValue] = React.useState(0);

Étape 4 - Nous devons utiliser des onglets et des composants d'onglets. Voici un exemple de la façon d'utiliser ces composants -

<Tabs value={value} onChange={(event, newValue) => setValue(newValue)}>
   <Tab label="Tab 1" />
   <Tab label="Tab 2" />
   <Tab label="Tab 3" />
</Tabs>

Exemple 1

Dans cet exemple, nous créons un état pour suivre l'onglet actif : nous créons une variable d'état appelée activeTab qui est initialisée à "tab1".

Nous définissons une fonction handleTabChange, qui prend event et newValue comme paramètres et met à jour l'état activeTab.

Nous pouvons vérifier l'onglet actif en vérifiant la valeur de la variable d'état activeTab. Par exemple, si activeTab vaut « tab1 », le premier onglet est actif ; si activeTab vaut « tab2 », le deuxième onglet est actif, et ainsi de suite.

import React from 'react';
import { Tabs, Tab } from '@mui/material';

function MyComponent() {
   // Step 1: Create a state to keep track of the active tab
   const [activeTab, setActiveTab] = React.useState('tab1');

   // Step 2: Define a function to handle tab changes
   const handleTabChange = (event, newValue) => {
      setActiveTab(newValue);
   };

   // Step 3: Use the Tabs and Tab components
   return (
      <Tabs value={activeTab} onChange={handleTabChange}>
         <Tab value="tab1" label="Tab 1" />
         <Tab value="tab2" label="Tab 2" />
         <Tab value="tab3" label="Tab 3" />
      </Tabs>
   );
}

export default MyComponent;

Sortie

Exemple 2

Une autre façon de vérifier quel onglet est actif à l'aide de Material-UI consiste à utiliser la propriété sélectionnée du composant onglet. L'attribut selected nous permet de définir si l'onglet doit être sélectionné.

Dans ce cas, nous pouvons vérifier quel onglet est actif en vérifiant la variable d'état activeTab ; nous transmettons la propriété sélectionnée au composant Tab et comparons la valeur de la variable d'état activeTab avec la valeur du composant Tab. S'il y a une correspondance, l'onglet est sélectionné ; sinon, il ne l'est pas.

Voici un exemple de la façon d'utiliser les accessoires sélectionnés pour vérifier quel onglet est actif -

import React from 'react';
import { Tabs, Tab } from '@mui/material';

function MyComponent() {
   const [activeTab, setActiveTab] = React.useState('tab1');

   const handleTabChange = (event, newValue) => {
      setActiveTab(newValue);
   };
   return (
      <Tabs value={activeTab} onChange={handleTabChange}>
         <Tab value="tab1" label="Tab 1" selected={activeTab === 'tab1'} />
         <Tab value="tab2" label="Tab 2" selected={activeTab === 'tab2'} />
         <Tab value="tab3" label="Tab 3" selected={activeTab === 'tab3'} />
      </Tabs>
   );
}
export default MyComponent;

Sortie

Dans ce tutoriel, nous avons appris à vérifier quel onglet est actif à l'aide de Material-UI.

Nous avons vu comment installer Material-UI, importer des onglets et des composants d'onglets, créer des variables d'état pour suivre les onglets actifs et comment utiliser ces composants dans notre code JSX.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!