정보실

웹학교

정보실

Reactjs React Tabs - ReactJS를 위한 접근하기 쉬운 탭 구성 요소.

본문

Luigi 탭이 기본적으로 비활성화 되어 있는 간단한 사용 사례입니다. [tab]을 사용하여 탭에 초점을 맞추고 왼쪽 / 오른쪽 또는 위 / 아래 화살표를 사용하여 탭을 전환 할 수 있습니다.


https://reactcommunity.org/react-tabs/ 


https://github.com/reactjs/react-tabs


설치 


yarn add react-tabs

or

npm install --save react-tabs

또한 HTML 문서에서 React 탭을 UMD 빌드로 직접 사용할 수도 있습니다.


<script src="https://unpkg.com/react-tabs/dist/react-tabs.development.js" />
<!-- or -->
<script src="https://unpkg.com/react-tabs/dist/react-tabs.production.min.js" />


기본 예 


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>
);





페이지 정보

조회 66회 ]  작성일20-01-27 10:44

웹학교