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

Day16. UI 實戰篇：Combo Box

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Kalan Kalan
September 25, 2020
Programming
270
0

Day16. UI 實戰篇：Combo Box

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

Avatar for Kalan

Kalan

September 25, 2020

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
Avatar for Kalan kjj6198
0
830
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
430
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
230
状態管理を楽にする道
Avatar for Kalan kjj6198
1
450
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
200
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
240
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
250
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
230
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
210

Other Decks in Programming

See All in Programming
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
Avatar for YFurukawa furukawayasuto
0
110
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
0
440
初心者DevRelとして参加者だった私が、DevRel Talks!#2に登壇するまでにしてきたこと
Avatar for Rai sokohirai
0
340
PyO3 で既存 Python 評価器を Rust core 化する ー wasm-bindgen でブラウザにも配るための設計
Avatar for 𝕂' kdash
1
500
tsc.rip を支える技術 / Kyoto.なんか #8
Avatar for Susisu susisu
0
4.3k
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
Avatar for izumin5210 izumin5210
0
650
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
Avatar for Tatsuki tatsuki12
4
1.7k
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
280
【DroidKaigi 2026】「アクセシビリティを利用するとき、 アクセシビリティもまたこちらを利用している」 〜マルウェアによる攻撃と防衛について〜
Avatar for HalunoYo. halunoyo
0
410
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
Avatar for 村上優稀 musan
3
270
ハーネス設計入門 〜プロンプト、コンテキストの次〜
Avatar for kinopee kinopeee
55
36k
型解析で実現する Go の言語内 DSL / Conference に Go! タイムテーブルの歩き方 for Gophers
Avatar for mazrean mazrean
0
130

Featured

See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
920
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
510
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.3k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.2k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.1k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.9k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
820
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
550
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
560
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k

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