Operation result (Result)

Properties

Property	Type	Required	Default value	Description
type	'success' | 'danger' | 'info' | 'warn' | 'wait'	No	-	Built-in result type. success: Success danger: Error or danger info: Information warn: Warning wait: Waiting
image	string | slot	No	-	A custom image. This property is ignored if type is set.
title	string | slot	No	-	The title text.
message	string | slot	No	-	The subtitle text.
buttons	{text: string; type: 'default' | 'primary' | 'warn' | 'danger' | 'success' | 'light'}[]	No	-	The buttons to display.
className	string	No	-	The class name.

Events

Event name	Description	Type
onButtonTap	Triggered when a button is tapped.	(idx: number) => void

Slots

Name	Description
title	Title content.
message	Description content.
image	Custom icon.

Style classes

Class name	Description
amd-result	The overall component style.
amd-result-main	The content area.
amd-result-image	The icon area.
amd-result-buttons	The button area.

Code examples

Basic usage

index.axml:

<view class="demo">
  <demo-block padding="0" title="Success state">
    <result title="Operation Successful" message="Details can wrap. We recommend keeping the content to two lines or less." type="success"/>
  </demo-block>
  <demo-block padding="0" title="Waiting state">
    <result title="Processing" message="Details can wrap. We recommend keeping the content to two lines or less." type="wait"/>
  </demo-block>
  <demo-block padding="0" title="Info state">
    <result title="Information" message="Details can wrap. We recommend keeping the content to two lines or less." type="info"/>
  </demo-block>
  <demo-block padding="0" title="Info state">
    <result title="Warning" message="Details can wrap. We recommend keeping the content to two lines or less." type="warn"/>
  </demo-block>
  <demo-block padding="0" title="Failed state">
    <result title="Operation Failed" message="Details can wrap. We recommend keeping the content to two lines or less." 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">Message Slot</view>
    </result>
  </demo-block>
</view>

index.js:

Page({
  data: {
    buttons: [
      {
        text: 'Primary Action',
        type: 'primary',
      },
      {
        text: 'Secondary Action',
        type: 'default',
      },
    ],
  },
  handleTabBtn(e) {
    my.alert({
      content: `You tapped button ${e + 1}: ${this.data.buttons[e].text}`,
    });
  },
});

index.acss:

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

index.json:

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