Storybook와 NPM 패키지 정보

• 라이브 스토리북: Storybook
• NPM 패키지: react-tabs-booung

설치

npm install react-tabs-booung

Index 컴포넌트

Tabs는 탭 기반의 콘텐츠 레이아웃을 쉽게 구성할 수 있게 도와주는 컴포넌트입니다.

사용법

다음과 같이 사용할 수 있습니다.

import { Tab, TabList, TabPanel, Index, TabPanelList } from 'react-tabs-booung';

const App = () => {
return (
<Index>
<TabList>
<Tab name={'first'}>
<h3>first</h3>
</Tab>
<Tab name={'second'}>
<h3>second</h3>
</Tab>
</TabList>

      <TabPanelList>
        <TabPanel name={'first'}>
          <div>first Panel</div>
        </TabPanel>
        <TabPanel name={'second'}>
          <div>second Panel</div>
        </TabPanel>
      </TabPanelList>
    </Index>
);
};

API

Props

| Prop | Type | Description | Default Value | |--------------|-----------------|----------------------------------------------------|---------------| | className | string | 컴포넌트에 적용할 클래스명입니다. | '' | | defaultFocus | boolean | 초기 렌더링 시 탭에 포커스를 줄지 여부입니다. | false | | defaultIdx | string| 초기 렌더링 시 어떤 탭이 활성화될지를 결정합니다. | 0 |