卡片
卡片是针对单个主题的文本、照片和操作的容器。
安装
npx nextui-cli@latest add card
以上命令仅用于单独安装。如果已全局安装 @nextui-org/react，则可以跳过此步骤。
导入
NextUI 导出了 4 个与卡片相关的组件
- Card：用于显示卡片的主要组件。
- CardHeader：通常用于卡片的标题。
- CardBody：卡片的内容。
- CardFooter：通常用于操作。
用法
带分隔符
有关更多详细信息，请参阅 分隔符 组件。
带图片
模糊页脚
您可以将 isFooterBlurred prop 传递给卡片以模糊页脚。
组合
您可以在卡片中使用其他 NextUI 组件来组合更复杂的卡片。
模糊卡片
您可以将 isBlurred prop 传递给卡片以模糊卡片。
主要操作
如果您将 isPressable 属性传递给卡片，它将呈现为按钮。
注意：使用的回调函数是
onPress而不是onClick。有关更多详细信息，请参阅 usePress 组件。
封面图片
您可以使用 Image 组件作为卡片的封面，方法是将其从 CardBody 组件中取出。
数据属性
Card 在 base 元素上具有以下属性
- data-hover：当卡片被悬停时。基于 useHover
- data-focus：当卡片被聚焦时。基于 useFocusRing。
- data-focus-visible：当卡片正通过键盘聚焦时。基于 useFocusRing。
- data-disabled：当卡片处于禁用状态时。基于
isDisabled属性。 - data-pressed：当卡片处于按下状态时。基于 usePress
API
卡片属性
| 属性 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| children | ReactNode | ReactNode[] | 通常卡片部分为 CardHeader、CardBody 和 CardFooter。 | - |
| 阴影 | none | sm | md | lg | 卡片阴影。 | 中 |
| 圆角 | none | sm | md | lg | 卡片边框圆角。 | 大 |
| fullWidth | 布尔值 | 卡片是否应该占据其父元素的全部宽度。 | 否 |
| isHoverable | 布尔值 | 卡片是否应该在悬停时更改背景。 | 否 |
| isPressable | 布尔值 | 卡片是否允许被按下。 | 否 |
| isBlurred | 布尔值 | 卡片背景是否应该模糊。 | 否 |
| isFooterBlurred | 布尔值 | 卡片页脚背景是否应该模糊。 | 否 |
| isDisabled | 布尔值 | 卡片是否应该禁用。按下事件将被忽略。 | 否 |
| disableAnimation | 布尔值 | 是否禁用动画。 | 否 |
| disableRipple | 布尔值 | 是否禁用涟漪效果。仅当 isPressable 为 true 时。 | 否 |
| allowTextSelectionOnPress | 布尔值 | 是否允许在按下时选择文本。仅当 isPressable 为 true 时。 | 否 |
| classNames | Record<"base"｜ "header"｜ "body"｜ "footer", string> | 允许为卡片插槽设置自定义类名。 | - |
卡片事件
| 属性 | 类型 | 说明 |
|---|---|---|
| onPress | (e: PressEvent) => void | 当在目标上释放按下时调用的处理程序。 |
| onPressStart | (e: PressEvent) => void | 当按下交互开始时调用的处理程序。 |
| onPressEnd | (e: PressEvent) => void | 在按压交互结束时调用的处理程序，无论是在目标上还是当指针离开目标时。 |
| onPressChange | (isPressed: boolean) => void | 在按压状态更改时调用的处理程序。 |
| onPressUp | (e: PressEvent) => void | 在目标上释放按压时调用的处理程序，无论它是否从目标开始。 |
