
用法近似於 Dropdown Module,但 Popover Module 會透過原生 popover 的 toggle 事件,在被顯示之後自動吸附在某個關聯的元素附近。這樣使用者會以原生方式控制 Popover,又能使用 從 Popover 取得資訊,同時又可以保有 Sticky Position 的功能。
這個最大的好處在於可以自訂元件(例如想要把 .ts-box 變成彈出內容),而不再僅限於只能用 .ts-dropdown
用法像這樣:
先指定 data-name 給某個元素
<button class="ts-button" data-name="button" popovertarget="popup">
<span class="ts-icon is-chevron-down-icon"></span>
更多功能
</button>
然後建立一個 Popover,指定 data-popover,這個屬性表示這個 Popover 要吸附哪個元素,
所以 data-popover="button" 就會讓這個 Popover 在顯示的時候,吸附在 button
<div id="popup" class="ts-box" data-popover="button" style="width: 300px;" popover>
<div class="ts-image">
<img src="image.png">
</div>
<div class="ts-content">
<div class="ts-header is-heavy">好吃的千層蛋糕!</div>
<p>在 5 月之前於線上網路門市訂購,現在還特別加贈限量環保袋。</p>
</div>
</div>
用法近似於 Dropdown Module,但 Popover Module 會透過原生 popover 的 toggle 事件,在被顯示之後自動吸附在某個關聯的元素附近。這樣使用者會以原生方式控制 Popover,又能使用 從 Popover 取得資訊,同時又可以保有 Sticky Position 的功能。
這個最大的好處在於可以自訂元件(例如想要把 .ts-box 變成彈出內容),而不再僅限於只能用 .ts-dropdown
用法像這樣:
先指定
data-name給某個元素然後建立一個 Popover,指定
data-popover,這個屬性表示這個 Popover 要吸附哪個元素,所以
data-popover="button"就會讓這個 Popover 在顯示的時候,吸附在 button