Card

Card（卡片）是一个用于在单一主题上下文中容纳文本、照片和操作的容器。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

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

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

用法

带分隔线

更多详情请参见 Divider 组件。

带图片

底部模糊效果

你可以向卡片传递 isFooterBlurred 属性以使底部模糊。

组合使用

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

卡片模糊效果

你可以向卡片传递 isBlurred 属性以使整个卡片模糊。卡片的模糊效果属性基于其祖先元素。

注意：要实现在预览中所见的模糊效果，你需要为 Card 组件的某个祖先元素提供合适的背景（例如，bg-linear-to-tr from-[#FFB457] to-[#FF705B]），以便 Card 的模糊效果能够显现出来。

主要操作

如果你向卡片传递 isPressable 属性，它将被渲染为一个按钮。

注意：此处使用的回调函数是 onPress 而非 onClick。更多详情请参见 usePress 组件。

封面图片

你可以将 Image 组件作为卡片的封面，只需将其放在 CardBody 组件之外即可。

插槽

• base: 卡片的主要容器，放置头部（header）、主体（body）和底部（footer）的地方。
• header: 卡片的头部，通常用于标题。
• body: 卡片的主体，放置主要内容的地方。
• footer: 卡片的底部，通常用于操作按钮。

数据属性

Card 在 base 元素上具有以下属性：

• data-hover: 当卡片被悬停时。基于 useHover
• data-focus: 当卡片获得焦点时。基于 useFocusRing。
• data-focus-visible: 当卡片通过键盘获得焦点时。基于 useFocusRing。
• data-disabled: 当卡片被禁用时。基于 isDisabled 属性。
• data-pressed: 当卡片被按下时。基于 usePress

API

Card 属性

Card 事件