Skip to content

新的 Popover Module #970

@YamiOdymel

Description

@YamiOdymel

image

用法近似於 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>

Metadata

Metadata

Assignees

Labels

📜 JavaScript這件事情和模組、JavaScript 程式碼有關聯📦 新元件討論的是新的 UI 元件。

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions