# 卡片 Card

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/card
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

将信息分类后分标题、详情等区域聚合展现，一般作为简洁介绍或者信息的大盘和入口。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：常规的内容容器，可承载文字、列表、图片、段落，常用于模块划分和内容概览。
- **鼠标悬浮样式**：指定 `hoverable` 来为卡片添加鼠标悬浮样式，同时你可以通过样式覆盖来自定义悬浮样式。
- **无边框卡片**：设置 `bordered` 为 `false` 来使用无边框卡片。
- **简洁卡片**：卡片可以只有内容区域。
- **更灵活的内容展示**：使用 `Card.Meta` 支持更加灵活的内容（封面、头像、 标题、描述信息）
- **栅格卡片**：在系统概览页面常常和栅格进行配合。
- **预加载的卡片**：结合 `Skeleton` 来在数据读入前显示文本骨架。
- **网络型内嵌卡片**：通过 `Card.Grid` 来使用卡片内容区隔模式。
- **内部卡片**：卡片中可以嵌套其他卡片组件。
- **带页签的卡片**：举例来说，可以在卡片组件里面使用 `Tabs` 标签页组件。
- **支持更多内容配置**：`actions` 字段接收一个 `ReactNode` 数组，用于展示底部按钮组。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Card

|参数名|描述|类型|默认值|
|---|---|---|---|
|bordered|是否有边框|boolean |`true`|
|hoverable|是否可悬浮|boolean |`-`|
|loading|是否为加载中|boolean |`-`|
|size|卡片尺寸|'default' \| 'small' |`default`|
|cover|卡片封面|ReactNode |`-`|
|extra|卡片右上角的操作区域|string \| ReactNode |`-`|
|title|卡片标题|string \| ReactNode |`-`|
|actions|卡片底部的操作组|ReactNode[] |`-`|
|bodyStyle|内容区域自定义样式|CSSProperties |`-`|
|className|节点类名|string \| string[] |`-`|
|headerStyle|自定义标题区域样式|CSSProperties |`-`|
|style|节点样式|CSSProperties |`-`|

### Card.Meta

|参数名|描述|类型|默认值|
|---|---|---|---|
|avatar|头像|ReactNode |`-`|
|description|描述|string \| ReactNode |`-`|
|title|标题|string \| ReactNode |`-`|
|className|节点类名|string \| string[] |`-`|
|style|节点样式|CSSProperties |`-`|

### Card.Grid

|参数名|描述|类型|默认值|
|---|---|---|---|
|hoverable|是否可以悬浮|boolean |`-`|
|className|节点类名|string \| string[] |`-`|
|style|节点样式|CSSProperties |`-`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt