想先看 Code 或是 Demo 的由此去

Github Repo： ithelp-ui-demo

Live Demo：** Tabs**

Tabs 这边整个结构当初苦恼了我很久，先说明一下结构：

1. Tabs：Tabs 那整条
2. Tab：一个个 Tab
3. TabPane：各个 Tab 底下的内容
4. useTabsOverflow：处理 Tab 过多过长的情境

这边会复杂的点最主要的在於希望能达到 TabPane 在选到对应的 Tab 时不要先 render 出来（Lazy Loading），同时还要让使用 Tabs 时的 API 能更直觉（这点我觉得还可以更好）。

Basic Usage

<Tabs
  activeKey={tabKey}
  onChange={onChangeHandler}
>
  <TabPane
    key="1"
    tab={(<Tab>Tab 1</Tab>)}
  >
    TabPane 1
  </TabPane>
  <TabPane
    key="2"
    tab={(<Tab disabled>Tab 2</Tab>)}
  >
    TabPane 2
  </TabPane>
  <TabPane
    key="3"
    tab={(<Tab>Tab 3</Tab>)}
  >
    TabPane 3
  </TabPane>
</Tabs>

以下一样是只有把 HTML 结构跟 JS、React 的逻辑实作出来！

Tabs

Interface / APIs

元件实作

（目前是只有把 HTML 结构跟 JS、React 的逻辑实作出来，CSS 的部分会等之後的实作都赶完後候补上！）

Tab

TabPane

useTabsOverflow