跳到正文

Card 卡片

Card 把相关的内容放在同一块表面上:可选的封面,带标题、附加内容和关闭按钮的头部,然后是内容、底部和操作区。其余属性传给根元素。

演示

基础用法

有 title 时卡片是一个 section,由标题命名。

尺寸

size 决定内边距和标题字号:small、medium、large 或 huge。

封面

cover 位于头部之上,贴边显示,比如一张图片。

可悬浮

hoverable 让卡片在指针悬停时浮起:Elegant 是柔和的阴影,Brutal 是更长的墨色硬阴影。

头部附加、底部和操作区

headerExtra 放在头部末尾,footer 在内容下方,action 是底部一条背景更安静的操作区。

边框

bordered={false} 去掉边框(以及 Brutal 的阴影)。默认值跟随 ConfigProvider 的 bordered。

分割线

segmented 在各部分之间画线。true 全部分割;对象可以逐个指定,"soft" 让线留在内边距里。

可关闭

closable 在头部加一个 × 按钮,点击时调用 onClose。卡片不会自己隐藏。

无标题

没有标题、头部附加内容和关闭按钮时不渲染头部。

内容滚动

设置 contentScrollable 并给卡片一个高度后,只有内容区在 ScrollArea 里滚动,头部和底部保持不动。

嵌入

embedded 使用更安静的背景,适合放在其他表面里的卡片。

语义

tag 决定元素(有标题时默认 section,否则 div),titleLevel 决定标题级别(默认 h3)。有标题的 section、article 或 aside 由标题命名。

部分样式

每个部分都可以传类名和样式。

Card Props

名称类型默认值说明版本
titleReactNodeundefined标题,同时作为卡片的可访问名称。未发布
titleLevel1 | 2 | 3 | 4 | 5 | 63标题的级别。未发布
tagsection | article | aside | div有标题时 section,否则 div渲染的元素。未发布
children / contentReactNodeundefined内容,children 优先于 content。未发布
coverReactNodeundefined头部上方的封面,贴边显示。未发布
headerExtraReactNodeundefined头部末尾的附加内容。未发布
footerReactNodeundefined内容下方的底部。未发布
actionReactNodeundefined底部的操作区。未发布
sizesmall | medium | large | hugemedium内边距和标题字号。未发布
borderedbooleantrue是否显示边框,默认跟随 ConfigProvider 的 bordered。未发布
hoverablebooleanfalse悬停时浮起。未发布
embeddedbooleanfalse使用更安静的背景。未发布
segmentedboolean | CardSegmentedfalse各部分之间的分割线。未发布
closablebooleanfalse在头部加一个 × 按钮。未发布
onClose(event: MouseEvent<HTMLButtonElement>) => voidundefined点击 × 时调用。未发布
contentScrollablebooleanfalse只有内容区滚动,需要给卡片设置高度。未发布
headerClassName / headerStylestring / CSSPropertiesundefined头部的类名和样式。未发布
headerExtraClassName / headerExtraStylestring / CSSPropertiesundefined头部附加内容的类名和样式。未发布
contentClassName / contentStylestring / CSSPropertiesundefined内容区的类名和样式。未发布
footerClassName / footerStylestring / CSSPropertiesundefined底部的类名和样式。未发布

CardSegmented

名称类型说明
contentboolean | "soft"头部和内容之间的线。
footerboolean | "soft"底部上方的线。
actionboolean操作区上方的线。

title、headerExtra、cover、footer、action 都接受 ReactNode。关闭按钮始终可以用键盘访问。