# ResultPage <Experimental></Experimental>

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/result-page
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

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

## Install

```bash
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](#resultpagecard) or [Card](/components/card). ### Bottom buttons

### Custom use

## ResultPage

### Props

```typescript | pure
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](/components/card) component. [Refer to here for specific use](#use-with-card) | [Card](/components/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 | -       |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt