卡片

卡片是用於在單一主題的上下文中放置文字、照片和操作的容器。

安裝

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

導入

NextUI 匯出 4 個與卡片相關的元件

• Card：用於顯示卡片的主要元件。
• CardHeader：通常用於卡片的標題。
• CardBody：卡片的內容。
• CardFooter：通常用於操作。

使用方式

使用分隔線

請參閱分隔線元件以取得更多詳細資訊。

使用圖片

模糊的頁腳

您可以將 isFooterBlurred prop 傳遞給卡片，以模糊頁腳。

組成

您可以在卡片內使用其他 NextUI 元件來組成更複雜的卡片。

模糊卡片

您可以將 isBlurred 屬性傳遞給卡片以模糊卡片。卡片會根據其祖先元素取得模糊效果的屬性。

注意：若要達到預覽中看到的模糊效果，您需要為卡片元件的祖先元素提供適當的背景（例如，bg-gradient-to-tr from-[#FFB457] to-[#FF705B]），以使卡片的模糊效果可見。

主要動作

如果您將 isPressable 屬性傳遞給卡片，它將會被渲染為一個按鈕。

注意：所使用的回呼函式是 onPress 而不是 onClick。請參閱 usePress 元件以取得更多詳細資訊。

封面圖片

您可以透過將 Image 元件從 CardBody 元件中取出，來將其作為卡片的封面。

插槽

• base：卡片的主要容器，標頭、主體和頁尾都放置於此。
• header：卡片的標頭，通常用於標題。
• body：卡片的主體，放置主要內容的地方。
• footer：卡片的頁尾，通常用於動作。

資料屬性

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

• data-hover：當卡片被懸停時。基於 useHover
• data-focus：當卡片被聚焦時。基於 useFocusRing。
• data-focus-visible：當卡片使用鍵盤被聚焦時。基於 useFocusRing。
• data-disabled：當卡片被停用時。基於 isDisabled 屬性。
• data-pressed：當卡片被按下時。基於 usePress

API

卡片屬性

卡片事件