Popconfirm 確認浮層

錨在觸發器上的確認浮層。不是 Modal：預設沒有遮罩，面板用下拉選單的淺色表面。

面板 z-index 是 4000，與 Tooltip、Dropdown 相同。每多一層疊加 10。確定與取消按鈕高 34px。

示範

基本

點觸發器可開關。確定會發出 confirm 並關閉。取消、Esc、點外面會發出 cancel，detail 為 { reason }。再點觸發器不會發 cancel。

儲存草稿

<gk-popconfirm title="儲存此草稿？" content="稍後可從草稿繼續編輯。">
  <gk-button>儲存草稿</gk-button>
</gk-popconfirm>

位置

top、bottom、left、right，以及 -start／-end。靠近視窗邊緣時會翻轉。

上方下方左側右側

<gk-popconfirm placement="bottom" title="置於下方">...</gk-popconfirm>

警告與刪除

warning 與 error 的確定按鈕是危險色，並顯示圖示。error 使用 alertdialog，初始焦點在取消。

封存刪除項目

<gk-popconfirm type="error" title="確定刪除？" ok-text="刪除">
  <gk-button variant="danger">刪除項目</gk-button>
</gk-popconfirm>

自訂文案

ok-text／cancel-text 留空時，依文件語言顯示 OK／Cancel 或 確定／取消。

發佈

<gk-popconfirm title="發佈？" ok-text="發佈" cancel-text="先不要">...</gk-popconfirm>

圖示觸發

觸發器可以是圖示按鈕。點擊區請維持至少 34px。

···

<gk-popconfirm type="warning" title="封存此檔案？">
  <gk-button variant="secondary" aria-label="封存">···</gk-button>
</gk-popconfirm>

沒有取消

show-cancel="false" 只留確定。點外面與 Esc 仍會關閉。

標為已讀

<gk-popconfirm show-cancel="false" title="標為已讀？">...</gk-popconfirm>

隱藏箭頭

show-arrow 預設開啟。設 show-arrow="false" 可隱藏 8px 箭頭。

無箭頭

<gk-popconfirm show-arrow="false" title="沒有箭頭">...</gk-popconfirm>

受控

open 與 show 是別名。update:open 與 update:show 帶出下一個布林值。mask 預設關閉；只有需要 40% 遮罩與鎖定捲動時才打開。確定按鈕的非同步載入是後續項目，請在應用裡組合。

離開從外面打開

<gk-popconfirm :open="open" title="離開此頁？" @update:open="onOpen">...</gk-popconfirm>

Alpine

<gk-popconfirm title="儲存此草稿？" content="稍後可從草稿繼續編輯。">
  <button type="button">儲存草稿</button>
</gk-popconfirm>

API

屬性

屬性	型別	預設
open / show	boolean	false
title	string	''
content / message	string	''
placement	與 Tooltip 相同	'top'
trigger	'click' | 'manual'	'click'
type	'default' | 'warning' | 'error'	'default'
ok-text	string	''（OK／確定）
cancel-text	string	''（Cancel／取消）
show-cancel	boolean	true
disabled	boolean	false
show-arrow	boolean	true
mask	boolean	false

v1 以點擊開啟。trigger="manual" 時只由 open／show 控制。Hover 不會打開確認。

插槽

名稱	說明
default	觸發器
title	標題
content	說明
footer / action	取代預設的確定與取消

事件

名稱	Detail
update:open / update:show	下一個 boolean
open / close	—
confirm	按下確定後關閉
cancel	{ reason: 'cancel' | 'outside' | 'escape' }

CSS parts

trigger、panel、arrow、icon、title、content、footer、ok、cancel、mask。

無障礙

• 面板是 role="dialog"。type="error" 使用 role="alertdialog"。
• 只有 mask 開啟時 aria-modal 為 true。
• 標題與內容以 aria-labelledby、aria-describedby 關聯。
• 觸發器有 aria-haspopup="dialog" 與 aria-expanded。
• 一般確認聚焦確定。警告與錯誤在有取消按鈕時聚焦取消。
• Tab 在面板內循環。Esc 只關閉最上層，並把焦點還給觸發器。