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

Day16. UI 實戰篇:Combo Box

Kalan
September 25, 2020

Day16. UI 實戰篇:Combo Box

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

Kalan

September 25, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

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