手風琴

手風琴會顯示高階選項的列表，這些選項可以展開/收合以顯示更多資訊。

安裝

上述命令僅適用於個別安裝。如果 @nextui-org/react 已全域安裝，您可以跳過此步驟。

導入

NextUI 匯出 2 個與手風琴相關的元件

• Accordion：主要元件，用於顯示手風琴項目列表。
• AccordionItem：項目元件，用於顯示單個手風琴項目。

用法

帶有子標題

展開多個項目

如果您將 selectionMode 設定為 multiple，則 Accordion 將允許同時展開多個項目。

精簡

如果您將 isCompact 設定為 true，則 Accordion 將以精簡樣式顯示。

變體

Accordion 有 4 種變體：light、shadow、bordered 和 splitted。

淺色變體

陰影變體

帶邊框變體

分割變體

預設展開的鍵

如果您想要預設展開某些項目，您可以將 defaultExpandedKeys 屬性設定為鍵的陣列。

停用的鍵

如果您想要停用某些項目，您可以將 disabledKeys 屬性設定為鍵的陣列。

起始內容

如果您想要在手風琴項目之前顯示某些內容，您可以設定 startContent 屬性。

自訂指示器

手風琴項目有一個名為 indicator 的屬性。您可以使用它來自訂開啟/關閉指示器。

指示器也可以是一個 function，它會接收 isOpen、isDisabled 和預設的 indicator 作為參數。

自訂動畫

Accordion 提供 motionProps 屬性來自訂 enter / exit 動畫。

在此處了解更多關於 Framer 動畫變體 這裡。

受控

Accordion 是一個受控元件，這表示您需要自行控制 selectedKeys 屬性。

Accordion 項目插槽

• base：手風琴項目包裝器。
• heading：手風琴項目標題。它包含 indicator 和 title。
• trigger：開啟/關閉手風琴項目的按鈕。
• titleWrapper：title 和 subtitle 的包裝器。
• title：手風琴項目標題。
• subtitle：手風琴項目副標題。
• startContent：手風琴項目之前的內容。
• indicator：指示手風琴項目開啟/關閉狀態的元素。
• content：手風琴項目內容。

自訂手風琴樣式

您可以使用以下任何屬性來自訂手風琴和手風琴項目的樣式

• className：手風琴的類別名稱。修改手風琴包裝器的樣式。(Accordion)
• itemClasses：手風琴項目的類別名稱。一次修改所有手風琴項目的樣式。(Accordion)
• classNames：手風琴項目的類別名稱。分別修改每個手風琴項目的樣式。(AccordionItem)

以下是如何自訂手風琴樣式的範例

資料屬性

AccordionItem 在 base 元素上具有以下屬性

• data-open：手風琴項目是否開啟。
• data-disabled：當手風琴項目被停用時。
• data-hover：當手風琴項目被滑鼠懸停時。基於 useHover。
• data-focus：當手風琴項目被聚焦時。基於 useFocusRing。
• data-focus-visible：當手風琴項目使用鍵盤聚焦時。基於 useFocusRing。
• data-disabled：當手風琴項目被停用時。基於 isDisabled 屬性。
• data-pressed：當手風琴項目被按下時。基於 usePress。

輔助功能

• 對 空白鍵、Enter、向上箭頭、向下箭頭 和 Home / End 鍵的鍵盤事件支援。
• 鍵盤焦點管理和跨瀏覽器正規化。
• 手風琴項目的 aria-expanded 屬性。
• 手風琴項目的 aria-disabled 屬性。
• 手風琴項目的 aria-controls 屬性。

API

手風琴 Props

手風琴事件

手風琴項目 Props

手風琴項目事件

類型

手風琴項目指示器屬性

手風琴項目 classNames

動態屬性