[指南] 初探 – 用 Svelte 製作一個 UI 元件

隨著前端網頁框架的 React, Vue 和 Angular 佔據主流市場後,便想找個工具來撰寫共用於這三個框架的網頁元件。看著 Svelte 的介紹以及語法對於 React 和 Vue3 的使用者友善的情況下,便參考了 前端框架 Svelte 上手指南:從基本介紹到 UI 實戰與測試(iT邦幫忙鐵人賽系列書)的內文試做一個 下拉組合方塊 ( Combo Box )。

svelte logo


重點摘要

A11N

皆需自行實作。role=”combobox” 會必須要搭配 aria-autocomplete、aria-controls (與選項 id 對應)、aria-expanded (選項是否打開)

另外可以多補上 aria-activedescendant (目前選中哪一個)、aria-setsize ( 總共有幾個選項)、aria-posinset (目前選中第幾個)

滑鼠控制

由於 click 事件會在 blur 之後才發生,為了避免無法正常觸發,改用比 blur 更早發生的 mousedown 來實作點擊後的效果更佳。

鍵盤控制

ArrowUp 和 ArrowDown 可以用 dom.scrollIntoView() 來處理。
await tick() 是必須的,否則會事件會卡在 CallStack 中而沒有執行,進而無法更新畫面。

 


程式碼

[ Repo ]:https://github.com/andy922200/svelte-combo-box


參考資料

1. Svelte Custom element API
2. 用svelte.js开发web components
3. Web Components with Svelte
4. How to Create Svelte Component Libraries with SvelteKit
5. Svelte — 是什麼讓我遇見這樣的你

按讚加入粉絲團

延伸閱讀