Card

Card 包含关于单一主题的内容和操作选项。

Anatomy

NexUI 导出了 5 个 Card 相关组件:

Card: 用于显示卡片的根组件。
CardHeader: 用于显示卡片头部的组件。
CardBody: 用于显示卡片主体内容的组件。
CardFooter: 用于显示卡片底部的组件。
CardActionArea: 用于指定卡片的操作区域的组件。


import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  CardActionArea,
} from '@nex-ui/react'

Usage

Beautiful, modern and reliable React component library.

Composition

您可以在 Card 中使用其他 NexUI 组件来组合成更复杂的卡片。

Nex UI

nexui.dev

Beautiful, modern and reliable React component library.

With Image

Daily Mix

12 Tracks

Frontend Radio

Primary Action

Card 允许用户点击整个区域来触发主要操作。Card 的操作区域可以通过将其内容包装在 CardActionArea 组件中来指定。

Hover Effect

设置 hoverable 属性为 true 可以启用悬停效果，使卡片在鼠标悬停时具有视觉反馈。

Country Music

Gabriel

Trip Hop

Ava

Classical Music

Nina

Disc Jockey

David

Blurred Card

设置 blurred 属性为 true 使卡片具有模糊效果。

Daily Mix

12 Tracks

Frontend Radio

1:34

4:45

API

Card Props

Card 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	通常为 CardHeader、CardBody、CardFooter 以及其他自定义内容。
sx	Interpolation	-	用于根元素的 sx 属性。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
className	ClassValue	-	用于根元素的 className。
ref	Ref	-	Ref 用于转发到根元素。
radius	'sm'\|'md'\|'lg'\|'none'	'md'	Card 的 borderRadius。
shadow	'xs'\|'sm'\|'md'\|'lg'\|'xl'	'md'	Card 的阴影。
blurred	boolean	-	Card 是否模糊。
hoverable	boolean	false	Card 是否显示悬停效果。
disableAnimation	boolean	false	是否禁用悬停时的过渡效果。

CardHeader Props

CardHeader 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	CardHeader 的内容，将会使 avatar、action、title 和 subtitle 属性失效。
sx	Interpolation	-	用于根元素的 sx 属性。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
className	ClassValue	-	用于根元素的 className。
classNames	Partial<Record<Slots, ClassValue>>	-	CardHeader Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	CardHeader Slots 的 props。
ref	Ref	-	Ref 用于转发到根元素。
title	ReactNode	-	CardHeader 的标题。
subtitle	ReactNode	-	CardHeader 的副标题。
avatar	ReactNode	-	CardHeader 的头像。
action	ReactNode	-	CardHeader 的操作区域。

CardHeader Slots

Slot Name	Class Name	Default Component	Description
content	.nui-card-header-content	'div'	CardHeader 的内容容器。
title	.nui-card-header-title	'div'	CardHeader 的标题容器。
subtitle	.nui-card-header-subtitle	'div'	CardHeader 的副标题容器。

CardBody Props

CardBody 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
sx	Interpolation	-	用于根元素的 sx 属性。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
className	ClassValue	-	用于根元素的 className。
children	ReactNode	-	CardBody 的内容。
ref	Ref	-	Ref 用于转发到根元素。

CardFooter Props

CardFooter 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
sx	Interpolation	-	用于根元素的 sx 属性。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
className	ClassValue	-	用于根元素的 className。
children	ReactNode	-	CardFooter 的内容。
ref	Ref	-	Ref 用于转发到根元素。

CardActionArea Props

CardActionArea 继承 as (默认为 'button') 的 Props。

Prop	Type	Default	Description
sx	Interpolation	-	用于根元素的 sx 属性。
as	ElementType	'button'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
className	ClassValue	-	用于根元素的 className。
children	ReactNode	-	CardActionArea 的内容。
ref	Ref	-	Ref 用于转发到根元素。
disabled	boolean	false	CardActionArea 是否禁用。
disableRipple	boolean	false	是否禁用点击时的涟漪效果。