ResultPage <Experimental></Experimental>

Feedback on the result of the previous operation with an entire page.

Install

npm install antd-mobile@5.43.0

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.

Feedback on the result of the previous operation with an entire page.

When to Use

It is used when there is a very important operation that needs to inform the user of the processing result, and the feedback content is complex.

Demos

Basic use

Show detailed data

More than three lines will be automatically collapsed. ### Use with Card

Using with ResultPage.Card or Card. ### Bottom buttons

Custom use

ResultPage

Props

interface ResultPageDetail {
  label: ReactNode;
  value: ReactNode;
  bold: boolean; // When the `bold` field is `true`, the text will be bolded.
}

type ResultPageDetails = ResultPageDetail[]

Name	Description	Type	Default
children	Page content, it is recommended to only pass in the Card component. Refer to here for specific use	Card	-
description	Description	`ReactNode`	-
details	Details, more than three automatic folds	`ResultPageDetail[]`	-
icon	Customized `icon`	`ReactNode`	-
onPrimaryButtonClick	Event after the primary button is clicked	`(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void \| Promise<void>`	-
onSecondaryButtonClick	Event after the secondary button is clicked	`(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void \|Promise<void>`	-
primaryButtonText	The text of the primary button, the button is not displayed when it is `undefined`, `null` or the empty character	`ReactNode`	-
secondaryButtonText	The text of the secondary button, the button is not displayed when it is `undefined`, `null` or the empty character	`ReactNode`	-
status	Status types	`'success' \| 'error' \| 'info' \| 'waiting' \| 'warning'`	`'info'`
title	Title	`ReactNode`	-

CSS Variables

Name	Description	Default
--head-background-color	background color of the head	`var(--adm-color-primary)`

ResultPage.Card

Provides a white, no padding card, and you can control its style yourself.

Name	Description	Type	Default
children	content of the Card	ReactNode	-