卡片 Card
通用卡片容器。
安装
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 |