Result - Mobile Platform as a Service - Alibaba Cloud Documentation Center

A Result component provides feedback on the results of the previous operation. It is used when you need to inform an end user of the complex processing result of an important operation.

Property

Property	Type	Required	Default value	Description
type	'success' \| 'danger' \| 'info' \| 'warn' \| 'wait'	No	-	The built-in type. success: success. danger: error / danger. info: information warn: warning. wait: wait for processing.
image	string \| slot	No	-	A custom image. This property does not take effect if you configured the type property.
title	string \| slot	No	-	The main text.
message	string \| slot	No	-	The message.
buttons	{text: string; type: 'default' \| 'primary' \| 'warn' \| 'danger' \| 'success' \| 'light'}[]	No	-	The button type.
className	string	No	-	The class name.

Event

Event name	Description	Type
onButtonTap	Callback fired when the popup is closed.	`(idx: number) => void`

Slot

Name	Description
title	The title.
message	The description.
image	The icon.

Style class

The class name.	Description
amd-result	The style of the entire component.
amd-result-main	The style of the content display area.
amd-result-image	The style of the icon area.
amd-result-buttons	The style of the button area.

Code sample

Basic usage

The following shows an example of the code in the index.axml file:

<view class="demo">
  <demo-block padding="0" title="Success status">
    <result title="Operation succeed" message="The details of the content can be divided into lines, it is recommended not to exceed two lines" type="success"/>
  </demo-block>
  <demo-block padding="0" title="Waiting status">
    <result title="pending" message="The details of the content can be divided into lines, it is recommended not to exceed two lines" type="wait"/>
  </demo-block>
  <demo-block padding="0" title="Prompt status">
    <result title="information prompt" message="The details of the content can be divided into lines, it is recommended not to exceed two lines" type="info"/>
  </demo-block>
  <demo-block padding="0" title="Prompt status">
    <result title="warning prompt" message="The details of the content can be divided into lines, it is recommended not to exceed two lines" type="warn"/>
  </demo-block>
  <demo-block padding="0" title="Failure status">
    <result title="could not complete the operation" message="The details of the content can be divided into lines, it is recommended not to exceed two lines" type="danger"/>
  </demo-block>
  <demo-block padding="0" title="Custom icon">
    <result 
      buttons="{{buttons}}" 
      image="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original"
      onButtonTap="handleTabBtn">
      <view slot="title">Title slot</view>
      <view slot="message">Description slot</view>
    </result>
  </demo-block>
</view>

The following shows an example of the code in the index.js file:

Page({
  data: {
    buttons: [
      {
        text: 'Main operation',
        type: 'primary',
      },
      {
        text: 'Auxiliary operation',
        type: 'default',
      },
    ],
  },
  handleTabBtn(e) {
    my.alert({
      content: `The currently clicked button is ${e + 1}: ${this.data.buttons[e].text}`,
    });
  },
});

The following shows an example of the code in the index.acss file:

.amd-result-main {
  margin-bottom: 0;
}

The following shows an example of the code in the index.json file:

{
  "defaultTitle": "Result",
  "usingComponents": {
    "result": "antd-mini/es/Result/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}