彈出視窗 (Popover)

彈出視窗是一個非強制回應 (non-modal) 的對話框，會浮動在其觸發元素周圍。它通常用於在某個項目之上顯示額外的豐富內容。

安裝

以上指令僅適用於單獨安裝。如果已經全域安裝 @nextui-org/react ，您可以跳過此步驟。

導入

NextUI 導出 3 個與彈出視窗相關的元件

• Popover：用於顯示彈出視窗的主要元件。
• PopoverTrigger：觸發彈出視窗的元件。
• PopoverContent：包含彈出視窗內容的元件。

用法

帶有箭頭

顏色

位置

偏移

受控狀態

標題屬性 (Title Props)

為了確保彈出視窗將正確的標題暴露給輔助技術，您應該在 PopoverContent 元件上使用 titleProps 屬性。要使用此屬性，您必須傳遞一個函式作為子元素。

搭配表單使用

Popover 會處理彈出視窗內容中的焦點。這表示您可以毫無問題地將彈出視窗與表單元素一起使用。當彈出視窗關閉時，焦點會返回到觸發器。

注意：您可以將 autoFocus 屬性新增到第一個 Input 元件，以便在彈出視窗開啟時將焦點放在該元件上。

背景幕 (Backdrop)

Popover 元件有一個 backdrop 屬性，用於在彈出視窗後面顯示一個背景幕。背景幕可以是 transparent、opaque 或 blur。預設值為 transparent。

自訂動畫效果 (Custom Motion)

Popover 提供一個 motionProps 屬性，用於自訂 enter / exit 動畫。

在此連結瞭解更多關於 Framer 動畫變體 (motion variants) 的資訊。

自訂觸發器 (Custom Trigger)

插槽 (Slots)

• base：主要的彈出視窗插槽，它會包裝彈出視窗的內容，並將箭頭作為虛擬元素 (::before) 包含在內。
• trigger：彈出視窗的觸發器插槽，它具有一些小的樣式，以確保觸發器正常運作。
• backdrop：背景幕插槽，它包含背景幕的樣式。
• content：內容插槽，它包含彈出視窗的內容。

自訂樣式 (Custom Styles)

您可以透過將自訂 Tailwind CSS 類別傳遞到元件插槽來自訂 Popover 元件。

資料屬性 (Data Attributes)

Popover 在 PopoverContent 元素上具有以下屬性

• data-open：當彈出視窗開啟時。基於彈出視窗狀態。
• data-placement：彈出視窗的位置。基於 placement 屬性。箭頭元素會根據此屬性定位。
• data-focus：當彈出視窗正在被聚焦時。基於useFocusRing。
• data-focus-visible：當彈出視窗正在使用鍵盤聚焦時。基於useFocusRing。

無障礙 (Accessibility)

• 觸發器和彈出視窗會透過 ARIA 自動在語意上關聯。
• 當彈出視窗開啟時，彈出視窗外部的內容會對輔助技術隱藏。
• 當在外部互動或按下 Escape 鍵時，彈出視窗會關閉。
• 焦點會在掛載時移入彈出視窗，並在卸載時還原到觸發器元素。
• 彈出視窗相對於觸發元素定位，並會自動翻轉和調整，以避免與瀏覽器視窗邊緣重疊。
• 在彈出視窗外滾動會被阻止，以避免意外地重新定位或關閉它。

API

彈出視窗屬性 (Popover Props)

彈出視窗事件 (Popover Events)

彈出視窗觸發器屬性 (PopoverTrigger Props)

彈出視窗內容屬性 (PopoverContent Props)

彈出視窗類型 (Popover types)

彈出視窗位置 (Popover Placement)

動畫屬性 (Motion Props)