# 卡片 Card

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

通用卡片容器。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

通用卡片容器。

## 何时使用

可承载文字、列表、图片、段落等，便于用户浏览内容。

## 示例

## Card

### 属性

| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| bodyClassName | body 自定义类名 | `string` | - |  |
| bodyStyle | body 自定义样式 | `React.CSSProperties` | - |  |
| extra | header 右边区域 | `ReactNode` | - |  |
| headerClassName | header 自定义类名 | `string` | - |  |
| headerStyle | header 自定义样式 | `React.CSSProperties` | - |  |
| icon | header 左边图标 | `ReactNode` | - | 5.38.0 |
| onBodyClick | body 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |  |
| onClick | 卡片点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |  |
| onHeaderClick | header 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |  |
| title | header 左边区域 | `ReactNode` | - |  |

### CSS 变量

| 属性 | 说明 | 默认值 | 全局变量 | 版本 |
| --- | --- | --- | --- | --- |
| `--adm-card-border-radius` | 圆角大小 | `8px` | `--adm-card-border-radius` |  |
| `--adm-card-padding-inline` | 水平内边距 | `12px` | `--adm-card-padding-inline` |  |
| `--adm-card-header-border-width` | header 分割线宽度 | `0.5px` | `--adm-card-header-border-width` |  |
| `--adm-card-header-border-color` | header 分割线颜色 | `var(--adm-color-border)` | `--adm-card-header-border-color` |  |
| `--adm-card-header-gap` | header 水平间隙 | `8px` | `--adm-card-header-gap` | 5.38.0 |
| `--adm-card-header-padding-block` | header 垂直内边距 | `12px` | `--adm-card-header-padding-block` |  |
| `--adm-card-body-padding-block` | body 垂直内边距 | `12px` | `--adm-card-body-padding-block` |  |

---

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