Bagaimana untuk menyemak tab mana yang aktif menggunakan UI Bahan?

Material-UI menyediakan pelbagai komponen untuk membantu kami membina antara muka pengguna dengan rupa dan rasa yang konsisten. Salah satu komponen yang disediakan oleh Material-UI ialah komponen Tab, yang membolehkan kami membuat antara muka tab dalam aplikasi kami. Dalam tutorial ini, kami akan belajar cara menyemak tab yang aktif menggunakan perpustakaan UI React yang popular Bahan-UI.

Gunakan cangkuk useState untuk menyemak tab mana yang aktif

Pengguna boleh mengikuti langkah di bawah untuk menyemak tab mana yang aktif menggunakan UI Bahan.

Langkah 1 - Pertama, pengguna perlu memasang Bahan-UI. Kita boleh melakukan ini dengan menjalankan arahan berikut -

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

Langkah 2 - Import tab dan komponen tab. Kita boleh melakukan ini dengan menambah baris kod berikut di bahagian atas fail komponen -

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

Langkah 3 - Buat status untuk menjejak tab aktif. Kita boleh melakukan ini menggunakan cangkuk useState dalam React. Berikut ialah contoh cara mencipta pembolehubah keadaan bernama nilai -

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

Langkah 4 - Kita perlu menggunakan tab dan komponen tab. Berikut ialah contoh cara menggunakan komponen ini -

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

Contoh 1

Dalam contoh ini, kami mencipta keadaan untuk menjejak tab aktif: kami mencipta pembolehubah keadaan dipanggil activeTab yang dimulakan kepada "tab1".

Kami mentakrifkan fungsi handleTabChange, yang mengambil peristiwa dan newValue sebagai parameter dan mengemas kini keadaan ActiveTab.

Kita boleh menyemak tab aktif dengan menyemak nilai pembolehubah keadaan ActiveTab. Contohnya, jika activeTab ialah "tab1", tab pertama adalah aktif; jika activeTab ialah "tab2", tab kedua adalah aktif, dan seterusnya.

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;

Output

Contoh 2

Cara lain untuk menyemak tab yang aktif menggunakan Material-UI ialah menggunakan sifat komponen tab yang dipilih. Atribut yang dipilih membolehkan kami menentukan sama ada tab harus dipilih.

Dalam kes ini, kita boleh menyemak tab mana yang aktif dengan menyemak pembolehubah keadaan activeTab kita menghantar sifat yang dipilih kepada komponen Tab dan membandingkan nilai pembolehubah keadaan activeTab dengan nilai komponen Tab. Jika terdapat padanan, tab dipilih jika tidak, ia tidak.

Berikut ialah contoh cara menggunakan prop yang dipilih untuk menyemak tab mana yang aktif -

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;

Output

Dalam tutorial ini, kami mempelajari cara menyemak tab yang aktif menggunakan Material-UI.

Kami telah melihat cara memasang Bahan-UI, mengimport tab dan komponen tab, mencipta pembolehubah keadaan untuk menjejaki tab aktif dan cara menggunakan komponen ini dalam kod JSX kami.

Atas ialah kandungan terperinci Bagaimana untuk menyemak tab mana yang aktif menggunakan UI Bahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!