Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day16. UI 實戰篇：Combo Box

9d7732f8bad970e853ce664588b204b0?s=47 Kalan
September 25, 2020
Programming
0
65

Day16. UI 實戰篇：Combo Box

第 12 屆 IT 鐵人賽影片教學 — 30 天從 0 到 1 學 Svelte

9d7732f8bad970e853ce664588b204b0?s=128

Kalan

September 25, 2020
Tweet

More Decks by Kalan

See All by Kalan
選擇 Svelte 的三個理由 - JSDC
9d7732f8bad970e853ce664588b204b0?s=48 kjj6198
0
67
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
9d7732f8bad970e853ce664588b204b0?s=48 kjj6198
0
50
状態管理を楽にする道
9d7732f8bad970e853ce664588b204b0?s=48 kjj6198
1
180
Day25. 如何解析 HTML 語法
9d7732f8bad970e853ce664588b204b0?s=48 kjj6198
0
51
Day24. Svelte 如何編譯程式碼（2）
9d7732f8bad970e853ce664588b204b0?s=48 kjj6198
0
84
Svelte 如何編譯程式碼（1）
9d7732f8bad970e853ce664588b204b0?s=48 kjj6198
0
69
Day22. Svelte 經驗談
9d7732f8bad970e853ce664588b204b0?s=48 kjj6198
0
64
Day18. UI 實戰篇 - 圖片檢視器
9d7732f8bad970e853ce664588b204b0?s=48 kjj6198
0
44
Day17. UI 實戰篇 - 音樂播放器
9d7732f8bad970e853ce664588b204b0?s=48 kjj6198
0
24

Other Decks in Programming

See All in Programming
Rに管理されてみる
154699a2e3d8b497494a5ee118f211a5?s=48 kazutan
0
250
Google IO 2022 社内LT会 / What's new in Android development tools
B65b9817b6cdb9bc923b82657a3162b7?s=48 shingo_kobayashi
0
370
Untangling Coroutine Testing (Droidcon Berlin 2022)
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
1
470
FutureCon 2022 FlutterアプリのPerformance測定
4affdb6a9878e509da7ca41a87051352?s=48 harukafujita
0
130
Rust、何もわからない...#3
5d9c07f0c2044b1407a84d88362bc84d?s=48 estie
0
140
Pluggable Storage in PostgreSQL
62f5ee39e37ba4f8a22acc714781c879?s=48 sira
1
180
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
2
1.2k
「混ぜるな危険」を推進する設計
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
8
2.5k
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
Ae763d151aeee101b40ae10cc13ebe63?s=48 maroon1st
0
13k
ESM移行は無理だけどおれもSindreのライブラリが使いたい！
208355d7af69fa84a78048f78077048a?s=48 sosukesuzuki
2
530
Register-based calling convention for Go functions
86d54dc23ace2b5920f7d5777949ed8f?s=48 cjamhe01385
0
380
OSS貢献を気軽にしたい Let's Go Talk #1
Aa0368c69701536321af9db1ae552b45?s=48 yuyaabo
2
230

Featured

See All Featured
Done Done
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
Git: the NoSQL Database
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
173
8.6k
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
213
7.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
14
3.8k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
25
15k
Gamification - CAS2011
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.9k
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
334
37k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day16 - UI 實戰篇：下拉式組合⽅塊 Combo Box

  2. 第 12 屆 IT 鐵⼈賽 應⽤情景 使⽤者選擇清單中的某⼀項，並提供搜尋功能

  3. 第 12 屆 IT 鐵⼈賽 功能 可以輸入部分⽂字作匹配 可點擊下拉選單選項改變輸入值 text 選項

    1 選項 2 選項 3 選項 4 選項 5

  4. 第 12 屆 IT 鐵⼈賽 進階功能 使⽤者可以⽤鍵盤操作選項 按下 Enter 後確認選項

    按下 ESC 後關閉選單 Accessibility 的⽀援 combobox, listbox