The Message topic describes different methods of using this component and the API descriptions:
Use this component in the Kylin project.
Use this component in other projects. Import it through ESModule.
API description provides API information for props, slots, and events.
Kylin
<dependency component="{ Message }" src="@alipay/antui-vue" ></dependency>
ESModule
import { Message } from '@alipay/antui-vue';
API description
props
Property | Description | Type | Default value |
---|---|---|---|
type | Button type. Value options include | String |
|
icon | Icon type. Value options include | String |
|
main | Main content of the pure text prompt. The DOM of the placeholder is not displayed when the main content is specified as | String, Boolean | - |
sub | Sub content of the pure text prompt. The DOM of the placeholder is not displayed when the main content is specified as | String, Boolean | - |
slots
Name | Description | Scope |
---|---|---|
main | Used in the scenario where the DOM needs to be populated into | - |
sub | Used in the scenario where the DOM needs to be populated into | - |
- | Used to populate content under sub. | - |
events:None
Demo
Success state
Sample image
Sample code
<template>
<div>
<Message type="result" icon="success" main="Success" sub="Sub-prompt"></Message>
<Message type="multi" icon="success" main="Prompt" sub="Sub-prompt"></Message>
<Message type="" icon="success" main="Payment Succeeded" :sub="false" ></Message>
</div>
</template>
Success result page
Sample image
Sample code
<template>
<div>
<Message type="result" icon="successful" main="Success" >
<template slot="sub">
Content should be<br />no more than 2 rows.
</template>
</Message>
<div class="am-button-wrap">
<AButton type="blue">Primary Action</AButton>
<AButton type="white">Auxiliary Action</AButton>
</div>
</div>
</template>