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

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

安装

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 或 Card 组件使用。 ### 底部按钮

自定义

ResultPage

属性

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

type ResultPageDetails = ResultPageDetail[]

属性	说明	类型	默认值
children	页面内容，推荐只传入 Card 组件。具体使用参考此处	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	-