彈出內容 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<button class="ts-button" popovertarget="popup">
    打開彈出內容 ✨
</button>
<div class="ts-popover" id="popup" popover>
    <div class="ts-content">
        任何人都應該有不受拘束的創作自由，<br>
        這也是我們最致力發展的目標。
    </div>
</div>

概要

彈出內容使用瀏覽器原生 Popover API。彈出內容顯示時，會自動附著在對應的元素上。

結構

主要內容

彈出內容是一個雛型框架，內容可參考底部的《組合應用》章節。

<div class="ts-popover" popover>
    <!-- ... -->
</div>

組合應用

同行編輯

某些文字被點擊後，會彈出額外的表單供使用者編輯資料。

<button class="ts-text is-editable" popovertarget="edit">
    商品售價：$3,600
</button>
<div class="ts-popover" id="edit" popover>
    <div class="ts-content is-secondary is-dense">
        <div class="ts-text is-bold">編輯價格</div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-content">
        <div class="ts-grid">
            <div class="column is-fluid">
                <div class="ts-input">
                    <input type="number" value="3600">
                </div>
            </div>
            <div class="column">
                <button class="ts-button is-icon" popovertarget="edit">
                    <span class="ts-icon is-check-icon"></span>
                </button>
            </div>
        </div>
    </div>
</div>

使用者詳情

點選某個大頭貼之後彈出使用者詳情。

<button class="ts-image" popovertarget="profile">
    <img src="user.png" width="32">
</button>
<div class="ts-popover" id="profile" popover>
    <div class="ts-image">
        <img src="image.png" width="300">
    </div>
    <div class="ts-content">
        <div class="ts-header is-heavy">Yami Odymel</div>
        <div class="ts-meta is-secondary">
            <a class="item">3 天前加入</a>
            <a class="item">5 位好友</a>
        </div>
    </div>
</div>

JavaScript 功能

透過屬性標籤控制

點擊帶有 [popovertarget] 屬性的按鈕可以開、關對應 [id] 的彈出內容。

<button class="ts-button" popovertarget="example">
    打開範例內容 ✨
</button>
<div class="ts-popover" id="example" popover>
    <div class="ts-content">
        點擊彈出內容以外的區域，<br>
        來關閉這個視窗。
    </div>
</div>

以 JavaScript 控制內容

透過瀏覽器原生的 .showPopover() 函式打開彈出內容。彈出內容開關時，會觸發 toggle 事件。

// 打開 #popover 彈出內容。
document.querySelector('#popover').showPopover();

// 關閉 #popover 彈出內容。
document.querySelector('#popover').hidePopover();

屬性設定

說明預設值目標

[data-position]

	說明	預設值	目標
[data-position]	彈出內容顯示時的偏好位置。 `top` `top-start` `top-end` `bottom` `bottom-start` `bottom-end`	`bottom`	`.ts-popover`
[data-anchor]	彈出內容附著的目標元素 `[id]`。不指定時，會吸附於觸發元素。		`.ts-popover`

彈出內容顯示時的偏好位置。

top
top-start
top-end
bottom
bottom-start
bottom-end

bottom

.ts-popover

[data-anchor]

彈出內容附著的目標元素 [id]。
不指定時，會吸附於觸發元素。

.ts-popover

在尋找相似的元件嗎？