iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Modern Web

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

Day 23 - 實戰演練 — TextField

https://ithelp.ithome.com.tw/upload/images/20211008/20120754Jw1h2UcVGq.png

今天要實作的是 TextField ,雖然是參照 Material-UI 的概念,但在這邊只是實作個外殼,必沒有要像 Material 那樣 Input 和 Select 都整合進去,而是在 Input 那邊再引用,這就待 Day 25 介紹 Input 的時候跟大家說了!

想先看 Code 或是 Demo 的由此去

Github Repo: ithelp-ui-demo

Live Demo:TextField

TextField

https://ithelp.ithome.com.tw/upload/images/20211008/20120754dacrjGAuMG.png

Interface / API

老樣子先來看看它會有哪些 Props,那這些就是操作一個 input-like 的輸入框會需要的值:

https://ithelp.ithome.com.tw/upload/images/20211008/20120754dZS8rUKPhz.png

寫成 Interface 則一樣是運用 擴充原生 div 的方式去寫額外的 Props:

https://ithelp.ithome.com.tw/upload/images/20211008/20120754WBJfsPp13k.png

元件實作

在這邊可以更明顯看出來 TextField 就是手動去寫一個 Input-like 的輸入框,讓之後傳入的 Input 和 Select 只需要專注在功能,在樣式上,不論是前綴還是後綴的 Icon 或是 disabled、error 等的狀態也可以無痛地在 TextField 這邊統一。

https://ithelp.ithome.com.tw/upload/images/20211008/20120754vjo9kwHxzf.png


上一篇
Day 22 - 實戰演練 — Portal 系列
下一篇
Day 24 - 實戰演練 — FormControl
系列文
關於 UI 元件你所該知道的事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言