卡片

卡片是用于在单个主题上下文中显示文本、照片和操作的容器。

安装

以上命令仅用于单独安装。如果 @nextui-org/react 已全局安装，则可以跳过此步骤。

导入

NextUI 导出 4 个与卡片相关的组件

• Card：用于显示卡片的主要组件。
• CardHeader：通常用于卡片的标题。
• CardBody：卡片的内容。
• CardFooter：通常用于操作。

用法

带分隔线

有关更多详细信息，请参阅分隔线组件。

带图片

模糊的页脚

您可以将isFooterBlurred属性传递给卡片以模糊页脚。

组合

您可以在卡片内部使用其他 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

卡片属性

卡片事件