iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
1
影片教學

前端框架新選擇 - 30 天從 0 到 1 學 Svelte系列 第 16

Day16. UI 實戰篇:下拉式組合方塊(Combo Box) | 30 天從 0 到 1 學 Svelte

  • 分享至 

  • xImage
  •  

影片

Yes

內容

在前端當中可能會出現的場景,在大量的選項清單當中選出一個選項,當選項過多時,長時間的滾動可能會降低使用者體驗,這時可以透過文字框輔助做下拉選單,方便使用者選擇。

  • 簡報連結:https://speakerdeck.com/kjj6198/day16-ui-shi-zhan-pian-combo-box
  • 程式碼連結:https://svelte.dev/repl/66e752ec604547b28cb001c0d5e77918?version=3.27.0

上一篇
Day15. UI 實戰篇:多功能表格實作 | 30 天從 0 到 1 學 Svelte
下一篇
Day17. UI 實戰篇:音樂播放器 | 30 天從 0 到 1 學 Svelte
系列文
前端框架新選擇 - 30 天從 0 到 1 學 Svelte30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Rplus
iT邦新手 5 級 ‧ 2020-09-26 23:15:43

對於下拉選單進視區的功能
我大概會直接抓 dom 序列再用 scrollIntoView() 處理 XD

愷開 iT邦新手 4 級 ‧ 2020-09-26 23:22:35 檢舉

對耶!當初在實作的時候沒有想到這個 API,剛剛把判斷式那邊改成用 scrollIntoView() 了,感謝建議!

Rplus iT邦新手 5 級 ‧ 2020-09-26 23:27:32 檢舉

更懶的話
我就直接用 datalist 後整個放生 XDDD

我要留言

立即登入留言