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

Day14: Slider 與列表互動

Kalan
September 23, 2020

Day14: Slider 與列表互動

◼︎ 本集內容:客製化 Slider 與列表的互動練習

透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。

Kalan

September 23, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

Transcript

  1. 第 12 屆 IT 鐵⼈賽
    30 天從 0 到 1 學 Svelte
    Day14 - UI 實戰篇:客製化 Slider 搭配列表互動

    View Slide

  2. 第 12 屆 IT 鐵⼈賽
    使⽤情景 - 有條件地搜尋列表

    View Slide

  3. 第 12 屆 IT 鐵⼈賽
    Slider 實作功能
    能⽤ input=range 就不要⾃⼰做
    選取範圍、可以透過滑鼠拉動
    可以點擊長條部分調整數字

    View Slide

  4. 第 12 屆 IT 鐵⼈賽
    列表實作功能
    可以順利顯⽰列表
    在篩選條件有變化時,做 Transition 效果

    View Slide

  5. 第 12 屆 IT 鐵⼈賽
    更多功能
    可以透過鍵盤操作數字(左、右)
    加入 FLIP
    Accessibility ⽀援
    aria-valuemind, aria-valuemax, aria-valuenow
    role="slider", aria-orientation="horizontal"

    View Slide