Day16. UI 實戰篇：Combo Box

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

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day16 - UI 實戰篇：下拉式組合⽅塊 Combo Box
   

   View Slide

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

   View Slide

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

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   進階功能
   使⽤者可以⽤鍵盤操作選項
   按下 Enter 後確認選項
   按下 ESC 後關閉選單
   Accessibility 的⽀援
   combobox, listbox
   

   View Slide