Tabs

여러 개의 자식 컴포넌트를 전환하면서 볼 수 있도록 해주는 컴포넌트입니다.

---

1

import React from "react";
import { Tabs, Tab } from "@solo5star/layout-component";

const App = () => {
  return (
    <Tabs>
      <Tab button="red" style={{ width: '100%', height: '200px', background: 'red' }}>1</Tab>
      <Tab button="orange" style={{ width: '100%', height: '200px', background: 'orange' }}>2</Tab>
      <Tab button="yellow" style={{ width: '100%', height: '200px', background: 'yellow' }}>3</Tab>
      <Tab button="green" style={{ width: '100%', height: '200px', background: 'green' }}>4</Tab>
      <Tab button="blue" style={{ width: '100%', height: '200px', background: 'blue' }}>5</Tab>
      <Tab button="purple" style={{ width: '100%', height: '200px', background: 'purple' }}>6</Tab>
    </Tabs>
  );
};

export default App;

• <Tab /> 컴포넌트를 사용하여 탭 아이템을 추가할 수 있습니다.
• <Tab /> 컴포넌트의 button props를 사용하여 탭 버튼에 표시될 이름을 변경할 수 있습니다.
  • 문자열 뿐만 아니라 컴포넌트를 넣을 수도 있습니다.