近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Select 的實踐方法 ( 需搭配 Dropdown 的 Portal 一起使用 )。
[ Repo ]:https://github.com/andy922200/practice-storybook-react
內容
參數
options – 選項,一般而言會以 label 和 value 作為選項內容
value – 選取到的值
onSelect – 外部傳入的當選到時呼叫的方法
placeholder – 預設字樣
isDisabled – 是否禁用
isLoading – 載入中與否
概念
單選情況:Select 本身的狀態僅需要處理開關 Drawer 與否即可
多選情況:除內部記錄 Drawer 開閉外,還需要多一個陣列來記錄選了什麼,並將這個結果藉由 onSelect 的方法來傳出
程式碼
相關文章
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化,便