React에서 레이블을 신속하게 구현하는 방법

아마 다른 빠른 제작 방법이 있을 거예요. 다음 두 가지요.

react-tabs

Material-UI Tabs

둘 다 해봤지만react-tabs는 아주 간단하게 라벨을 만들어서 소개하고 싶어요.

react-tabs

여러 번 말했지만 아주 간단하게 라벨을 만들 수 있어요.
갈색 커튼석 이런 마리오 캐릭터에 대한 설명을 라벨과 패널로 표시했다.

react-tabs 사용법

react-tabs
다음 명령을 사용하여 "react-tabs"를 설치합니다.

npm install --save react-tabs

git의 예에 기재된 바와 같이 이렇게 쓰면 라벨을 만들 수 있다.

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

export default () => (
  <Tabs>
    <TabList>
      <Tab>Title 1</Tab>
      <Tab>Title 2</Tab>
    </TabList>

    <TabPanel>
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel>
      <h2>Any content 2</h2>
    </TabPanel>
  </Tabs>
);

CSS 적용

다음 응용 프로그램은 react-tabs에서 제공하는 CSS입니다.
CSS는 기본적으로 적용되지 않습니다.

import 'react-tabs/style/react-tabs.css';