Card

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

Usage

Beautiful, modern and reliable React component library.

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

Nex UI

nexui.dev

Beautiful, modern and reliable React component library.

Daily Mix

12 Tracks

Frontend Radio

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

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

Country Music

Gabriel

Trip Hop

Ava

Classical Music

Nina

Disc Jockey

David

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

Daily Mix

12 Tracks

Frontend Radio

1:34

4:45

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

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

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

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

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 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
sx	Interpolation	-	用于根元素的 sx 属性。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。

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

Prop	Type	Default	Description
sx	Interpolation	-	用于根元素的 sx 属性。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。