Material UI를 사용하여 어떤 탭이 활성화되어 있는지 확인하는 방법은 무엇입니까?

Material-UI는 일관된 모양과 느낌으로 사용자 인터페이스를 구축하는 데 도움이 되는 다양한 구성 요소를 제공합니다. Material-UI가 제공하는 구성 요소 중 하나는 Tabs 구성 요소로, 이를 통해 애플리케이션에서 탭 인터페이스를 만들 수 있습니다. 이 튜토리얼에서는 인기 있는 React UI 라이브러리인 Material-UI를 사용하여 어떤 탭이 활성화되어 있는지 확인하는 방법을 알아봅니다.

useState 후크를 사용하여 어떤 탭이 활성화되어 있는지 확인하세요

사용자는 아래 단계에 따라 Material UI를 사용하여 활성화된 탭을 확인할 수 있습니다.

1단계 - 먼저 사용자는 Material-UI를 설치해야 합니다. 다음 명령을 실행하여 이를 수행할 수 있습니다 -

으아아아

2단계 - 탭 및 탭 구성 요소를 가져옵니다. 구성 요소 파일 상단에 다음 코드 줄을 추가하면 됩니다.

으아아아

3단계 - 활성 탭을 추적하기 위한 상태를 만듭니다. React의 useState 후크를 사용하여 이를 수행할 수 있습니다. 다음은 value라는 이름의 상태 변수를 생성하는 방법에 대한 예입니다.

으아아아

4단계 - 탭과 탭 구성 요소를 사용해야 합니다. 다음은 이러한 구성 요소를 사용하는 방법에 대한 예입니다. -

으아아아

예 1

이 예에서는 활성 탭을 추적하는 상태를 만듭니다. "tab1"로 초기화되는 activeTab이라는 상태 변수를 만듭니다.

이벤트와 newValue를 매개변수로 사용하고 activeTab 상태를 업데이트하는 함수 handlerTabChange를 정의합니다.

activeTab 상태 변수의 값을 확인하여 활성 탭을 확인할 수 있습니다. 예를 들어, activeTab이 "tab1"이면 첫 번째 탭이 활성화되고, activeTab이 "tab2"이면 두 번째 탭이 활성화됩니다.

으아아아

출력

예 2

Material-UI를 사용하여 어떤 탭이 활성화되어 있는지 확인하는 또 다른 방법은 탭 구성 요소의 selected 속성을 사용하는 것입니다. selected 속성을 사용하면 탭을 선택해야 하는지 여부를 정의할 수 있습니다.

이 경우 상태 변수 activeTab을 확인하여 어떤 탭이 활성화되어 있는지 확인할 수 있습니다. 선택한 속성을 Tab 구성 요소에 전달하고 상태 변수 activeTab의 값을 Tab 구성 요소의 값과 비교합니다. 일치하는 항목이 있으면 탭이 선택되고, 그렇지 않으면 선택되지 않습니다.

다음은 선택한 소품을 사용하여 어떤 탭이 활성화되어 있는지 확인하는 방법의 예입니다 -

으아아아

출력

이 튜토리얼에서는 Material-UI를 사용하여 어떤 탭이 활성화되어 있는지 확인하는 방법을 배웠습니다.

Material-UI 설치 방법, 탭 및 탭 구성 요소 가져오기, 활성 탭 추적을 위한 상태 변수 생성 방법, JSX 코드에서 이러한 구성 요소를 사용하는 방법을 살펴보았습니다.

위 내용은 Material UI를 사용하여 어떤 탭이 활성화되어 있는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!