卡片

卡片是用于将相关的 UI 元素和内容分组的通用容器。

介绍

Joy UI Card 组件包含几个互补的实用组件，以处理各种用例

• Card：用于将相关组件分组的表面级容器。
• Card Overflow：一个补充性的包装器，用于扩展 Card 的内容以填充所有边缘。
• Card Cover：一个可选的容器，用于在 Card Content 后方显示背景图像和渐变层。
• Card Content：一个可选的包装器，用于将内容置于前方（通常但不总是与 Card Cover 一起使用）。
• Card Actions：一个可选的包装器，用于将一组按钮分组。

基础

import Card from '@mui/joy/Card';

Card 是用于将相关组件分组的表面级容器。下面的演示展示了一个典型的 Card，它将 Typography、Aspect Ratio 和 Button 组件等组合在一起。

自定义

变体

Card 组件支持 Joy UI 的四种全局变体：plain、outlined（默认）、soft 和 solid。

尺寸

Card 组件提供三种尺寸：sm、md（默认）和 lg。

每种尺寸都有不同的内边距、间距和字体大小值。

颜色

主题中包含的每个调色板都可通过 color prop 获得。尝试将不同的颜色与不同的变体组合使用。

反转颜色

当 Card 的变体为 soft 或 solid 时，您可以使用 invertedColors={true} prop 反转子元素的颜色，以获得足够的对比度。

要了解更多关于此功能的信息，请查看颜色反转功能。

扩展以填充

import CardOverflow from '@mui/joy/CardOverflow';

默认情况下，Card 组件会在其内容的外边缘添加内边距。要消除此空白，请在 Card 内部添加 Card Overflow 组件作为要扩展内容的包装器。

卡片图层

import CardCover from '@mui/joy/CardCover';
import CardContent from '@mui/joy/CardContent';

默认的 Card 提供了一个平坦的表面，供其他组件放置在其上。使用 Card Cover 和 Card Content 组件可以在 Card 和其表面上的 UI 元素之间显示多个图层。

Card Cover 使您可以在 Card Content 下方添加图像、视频以及颜色和渐变叠加层。将鼠标悬停在下面的演示上，以查看图层是如何堆叠的

图像和视频

在 Card Cover 内部使用图像或视频元素来显示媒体。该组件默认使用 object-fit: cover 来填充整个 Card。

渐变叠加层

要创建渐变叠加层（当明亮的图像用作背景时经常看到），请在图像层和内容层之间插入一个额外的 Card Cover 组件。您可以添加任意数量的 Card Cover 以这种方式创建更复杂的堆叠图层。

水平对齐

Card 内容默认以列排列。对于水平对齐，请向 Card 添加 orientation="horizontal" prop。如果存在，Card Overflow 组件将相应地调整。

操作

卡片通常包含用户可以执行的操作，例如进入应用程序的新页面或部分。在给定的卡片中可能存在单独（离散）的操作，或者当单击或点击时，整个卡片本身可能会触发操作。

以下部分解释了如何处理这些场景中的每一种。

底部操作

卡片通常在底部包含按钮。使用 CardActions 组件作为这些按钮的包装器，以便在它们周围创建适当的间距。

下面的演示还使用 buttonFlex prop 将按钮的理想宽度设置为 120px，同时允许它们在必要时缩小。要了解更多关于 CSS flex 的信息，请访问 MDN 的指南。

离散操作

默认情况下，链接和按钮等操作元素位于 Card 的表面级交互区域之上。在某些情况下，您可能需要调整 z-index 以将这些元素置于前方——例如，下面的演示中的“收藏夹图标按钮”需要更高的 z-index 才能位于其 Aspect Ratio 同级元素的顶部。

整个卡片操作

要使整个 Card 可点击，请在 Card 内部的标题（或一些其他重要的文本内容）中添加 Link 组件。然后将 overlay prop 添加到 Link 以将其扩展到整个 Card。

CSS 变量演示场

试用 Card 组件可用的 CSS 变量，以查看设计如何变化。您可以使用这些变量通过 sx prop 和主题自定义组件。

常见示例

嵌套卡片

个人简介卡片

信用卡表单

祝贺卡片

常见问题卡片

许可证卡片

价格卡片

产品卡片

此示例演示了当按钮作为 CardOverflow 组件的唯一子元素放置时，自动调整的情况。按钮将被拉伸以填充 CardOverflow 的整个区域，并且底部角半径也会被调整。

用户卡片

将 CSS min-width 与 clamp 结合使用，当水平卡片达到或低于某个宽度时，可以堆叠。

下面的示例显示了一个用户卡片，当卡片的宽度等于或低于 500px 时，该卡片会堆叠。拖动手柄位于卡片的右下角。

Instagram 帖子

Dribbble 作品

可调整大小的容器

此演示使用类似于 Heydon Pickering 的 Flexbox Holy Albatross 的技术来创建一个可拉伸的 Card，当其宽度超过指定阈值时，该 Card 会在垂直和水平对齐之间切换——无需使用媒体查询来定义断点。尝试通过单击并拖动右下角来调整其大小，以查看其行为方式。

结构

Card 组件及其所有补充组件都由单个根 <div> 组成

<div class="MuiCard-root">
  <div class="MuiCardCover-root">
    <!-- optional Card Cover layer -->
  </div>
  <div class="MuiCardContent-root">
    <!-- optional Card Content layer -->
  </div>
  <div class="MuiCardOverflow-root">
    <!-- optional Card Overflow utility -->
  </div>
  <div class="MuiCardActions-root">
    <!-- optional Card Actions layer -->
  </div>
</div>

API

请参阅下面的文档，以获取此处提及的组件可用的所有 props 和 classes 的完整参考。

• <Card />
• <CardActions />
• <CardContent />
• <CardCover />
• <CardOverflow />