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

Day16. UI 實戰篇：Combo Box

Avatar for Kalan Kalan
September 25, 2020
Programming
240
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
820
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
400
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
220
状態管理を楽にする道
Avatar for Kalan kjj6198
1
430
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
180
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
230
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
240
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
210
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
200

Other Decks in Programming

See All in Programming
3Dシーンの圧縮
Avatar for Fadis fadis
1
410
Zod v4 Codec でスキーマに型変換を埋め込む REST API 設計 #TSKaigi2026
Avatar for Ryutaro Yako ryutaro_yako
0
160
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
370
Skillは並べた。動かなかった。契約で繋いだ。— 65個のSkillから、自走する開発サイクルへ
Avatar for じゅん junholee
0
770
iOS26時代の新規アプリ開発
Avatar for 野瀬田　裕樹 yuukiw00w
0
210
AI Agent と正しく分析するための環境作り
Avatar for yosh_yumyum yoshyum
3
610
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
490
TSKaigi2026-静的解析への投資がAI時代のコード品質を支える ── カスタムESLintルールの設計と運用
Avatar for HayatoKudou hayatokudou
6
1.2k
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
Avatar for 武田 憲太郎 kentaroutakeda
1
300
次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解
Avatar for Yuta Takahashi ytakahashii
3
1.1k
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
Avatar for shogogg shogogg
0
150
Transactional Change Stream Processing With Debezium and Apache Flink
Avatar for Gunnar Morling gunnarmorling
1
130

Featured

See All Featured
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
200
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
70
39k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
52k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
200
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
370

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