[筆記] 哎呀！不小心刻了一套 React UI 元件庫 6 – Form Control @地瓜大的飛翔旅程

章節連結

內容

Placement

程式碼
相關文章

近期為了熟悉元件 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