# 结果页面 <Experimental></Experimental> ResultPage <Experimental></Experimental>

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/result-page
- 资源: 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。

以页面的形式对前一步操作结果进行反馈。

## 何时使用

当有非常重要的操作需告知用户处理结果，且反馈内容较为复杂时使用。

## 示例

### 基础使用

### 展示详细数据

超过三行会自动折叠。 ### 配合卡片使用

搭配 [ResultPage.Card](#resultpagecard) 或 [Card](/zh/components/card) 组件使用。 ### 底部按钮

### 自定义

## ResultPage

### 属性

```typescript | pure
interface ResultPageDetail {
  label: ReactNode;
  value: ReactNode;
  bold: boolean; // `bold` 字段为 `true` 时，文字会加粗。
}

type ResultPageDetails = ResultPageDetail[]
```

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| children | 页面内容，推荐只传入 [Card](/zh/components/card) 组件。[具体使用参考此处](#配合卡片使用) | [Card](/zh/components/card) | - |
| description | 描述 | `ReactNode` | - |
| details | 详细信息，超过三条自动折叠 | `ResultPageDetail[]` | - |
| icon | 自定义 `icon` | `ReactNode` | - |
| onPrimaryButtonClick | 点击主要操作按钮后的事件 | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void \| Promise<void>` | - |
| onSecondaryButtonClick | 点击辅助操作按钮后的事件 | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void \|Promise<void>` | - |
| primaryButtonText | 主要操作按钮的文字，为`undefined`、`null`或空字符时不显示按钮 | `ReactNode` | - |
| secondaryButtonText | 辅助操作按钮的文字，为`undefined`、`null`或空字符时不显示按钮 | `ReactNode` | - |
| status | 状态类型 | `'success' \| 'error' \| 'info' \| 'waiting' \| 'warning' ` | `'info'` |
| title | 标题 | `ReactNode` | - |

### CSS 变量

| 属性                    | 说明         | 默认值                     |
| ----------------------- | ------------ | -------------------------- |
| --head-background-color | 顶部背景颜色 | `var(--adm-color-primary)` |

## ResultPage.Card

提供一个白色的、没有 `padding` 的卡片，可以自行控制其样式。

| 属性     | 说明     | 类型      | 默认值 |
| -------- | -------- | --------- | ------ |
| children | 卡片内容 | ReactNode | -      |

---

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