[筆記] 哎呀！不小心刻了一套 React UI 元件庫 22 – Tabs

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Tabs。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

參數

themeColor – 主題配色
options – Tabs 的選項內容
value – 用來指定被選中的 Tab
onChange – 當 Tab 被選中時，呼叫的 callback

---

概念

1. 會拆分成兩個子元件，一個為 <TabGroup>，另一個為 <Tab>
2. <TabGroup> 主要負責記錄包含的 <Tab> 的點選狀態，同時藉由遍歷生成 <Tab> 的同時，取得相對於 <TabGroup> 的 left 和 width 位置。這樣一來就有辦法製作出滑動效果的 Indicator 了。若你沒有要有滑動效果的話，那用 css 的 border-bottom 就可以
3. <Indicator> 需要和 <Tab> 在同一子層，這樣一來每當取得 left 和 width 的值後，就是將其改變加上動畫就會有了
4. 需要監聽當畫面寬度有放大縮小時，要重新取得新的 left 和 width

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/2502c6b5dc0553c08b3fd771f9931d94261890c0

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] Vue3 元件更新 Component Update
• [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 34
• [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 35
• [筆記] The Linux Command Line: A complete Introduction 指令大全心得 – 14
• [筆記] 管理 Mac 上的 SSH 設定檔，並用其抓取 Github 專案