iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

關於 UI 元件你所該知道的事系列 第 27

Day 27 - 實戰演練 — Tabs

https://ithelp.ithome.com.tw/upload/images/20211012/2012075455oStDwQ7s.png

想先看 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

https://ithelp.ithome.com.tw/upload/images/20211012/20120754Zi40b3Muct.png

https://ithelp.ithome.com.tw/upload/images/20211012/20120754hVt8XlIRKG.png

元件實作

(目前是只有把 HTML 結構跟 JS、React 的邏輯實作出來,CSS 的部分會等之後的實作都趕完後候補上!)

https://ithelp.ithome.com.tw/upload/images/20211012/20120754rxRFKjUv0R.png

Tab

https://ithelp.ithome.com.tw/upload/images/20211012/20120754wsV7aubHbF.png

TabPane

https://ithelp.ithome.com.tw/upload/images/20211012/2012075423ADcXuYC7.png

useTabsOverflow

https://ithelp.ithome.com.tw/upload/images/20211012/201207545FTDbq8hG7.png


上一篇
Day 26 - 實戰演練 — Notifier 、Notification
下一篇
Day 28 - 實戰演練 — Pagination
系列文
關於 UI 元件你所該知道的事30

尚未有邦友留言

立即登入留言