卡片

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

安装

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

导入

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

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

用法

使用分隔线

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

使用图片

模糊页脚

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

组合

您可以在卡片内使用其他 HeroUI 组件来组合更复杂的卡片。

模糊卡片

您可以将 isBlurred 属性传递给卡片以模糊卡片。卡片根据其父元素获得模糊属性。

注意：要实现预览中看到的模糊效果，您需要为 Card 组件的父元素提供合适的背景（例如，bg-gradient-to-tr from-[#FFB457] to-[#FF705B]），以便 Card 的模糊效果可见。

主要操作

如果您将 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

卡片属性

卡片事件