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

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Form Control 這個表格顯示常見的共用樣式的重點。

---

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

---

內容

Form Control 是用來處理 Form 元件如 Select, TextField, Checkbox…等所需的前後文字能夠保持一致，也避免重複造輪子。常見的內容會有 label, placement, isRequired, isError, errorMessage, maxLength …等。

其中 placement 的實作是在外層 div 設定 flex-direction，然後搭配 align-items 設定左上、右上、左下、右下

Placement

最外層設定：display: inline-flex

內層的 label 設定：display: flex、justify-content: space-between
傳入的 Form 元件無需特別動作

top-left：最外層加上 flex-direction: column
top: 最外層加上 flex-direction: column、align-item:center
top-right: 最外層加上 flex-direction: column、align-item:flex-end
left：最外層加上 align-item: center
right：最外層加上 align-item: center、flex-direction: row-reverse
bottom-left：最外層加上 flex-direction: column-reverse
bottom：最外層加上 flex-direction: column-reverse、align-items: center
bottom-right: 最外層加上 flex-direction: column-reverse、align-item:flex-end

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/2fa621c09ce5e84cdac8cb5723ce8f10d59cc30e

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 7
• [筆記] 實作動畫 div 移入效果需注意滾軸所造成的影響
• [筆記] 程式必修課！離散數學與演算法 – 6
• [筆記] 程式必修課！離散數學與演算法 – 5
• [筆記] 程式必修課！離散數學與演算法 – 4