卡片

卡片包含关于单个主题的内容和操作。

简介

卡片是在单个主题上显示内容和操作的表面。Material UI Card 组件包含几个互补的实用组件来处理各种用例

• Card：用于对相关组件进行分组的表面级容器。
• Card Content：卡片内容的包装器。
• Card Header：卡片标题的可选包装器。
• Card Media：用于显示图像、视频等的可选容器。
• Card Actions：对一组按钮进行分组的可选包装器。
• Card Action Area：允许用户与卡片的指定区域进行交互的可选包装器。

基础知识

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';

轮廓卡片

设置 variant="outlined" 以渲染轮廓卡片。

复杂交互

在桌面上，卡片内容可以展开。（单击向下箭头查看食谱。）

媒体

使用图像来强化内容的卡片示例。

默认情况下，我们使用 <div> 元素和背景图片的组合来显示媒体。在某些情况下，这可能会有问题，例如，您可能想要显示视频或响应式图像。对于这些用例，请使用 component 属性

主要操作

通常，卡片允许用户与整个表面交互以触发其主要操作，无论是展开、链接到另一个屏幕还是其他行为。卡片的操作区域可以通过将其内容包装在 CardActionArea 组件中来指定。

卡片还可以提供补充操作，这些操作应与主要操作区域分离，以避免事件重叠。

UI 控件

卡片内的补充操作使用图标、文本和 UI 控件显式调用，通常放置在卡片的底部。

这是一个媒体控制卡片的示例。

活动状态样式

要自定义卡片在活动状态下的样式，您可以将 data-active 属性附加到 Card Action Area 组件，并使用 &[data-active] 选择器应用样式，如下所示

🎨 如果您正在寻找灵感，您可以查看 MUI Treasury 的自定义示例。

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。

• <Card />
• <CardActionArea />
• <CardActions />
• <CardContent />
• <CardHeader />
• <CardMedia />
• <Collapse />
• <Paper />