Popover 是在按鈕旁開啟的小面板,用來放置可互動的內容:篩選條件、簡短的表單、顏色選擇器。它是原生的 popover="auto",因此瀏覽器會在按 Esc 鍵或點擊外部時關閉它、歸還焦點,並在 Tab 鍵順序中把它放在觸發元素之後。
懸停卡片是內容豐富的工具提示。滑鼠短暫懸停後就會開啟,透過鍵盤取得焦點時則立即開啟,用來描述它的觸發元素。指標移到卡片上時會保持開啟,因此可以閱讀和選取其中的文字。
兩者在空間不足時都會翻轉到另一側,始終留在畫面內,並在頁面捲動時跟隨觸發元素。
篩選
內含表單的 Popover。arrow 讓它指向觸發元素,hide() 可從程式碼關閉它。
Showing open, in review issues.
懸停卡片
將滑鼠懸停在名字上,或用 Tab 鍵移到它上面。卡片會描述該連結,因此螢幕閱讀器會在唸出名字後唸出卡片。
方位與進場動畫
side 和 align 決定它在哪裡開啟;start 和 end 會依循書寫方向。enter 和 motion 決定它如何進場。
rise · bouncy
swing · jelly
drop · snappy
unfold · mechanical