All Products
Search
Document Center

Message

Last Updated: Mar 07, 2022

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 result, multi, week, and ''(empty string).

String

''

icon

Icon type. Value options include success, pay, fail, error, warn, info, wait, and question. You can also input a class to define the icon.

String

success

main

Main content of the pure text prompt. The DOM of the placeholder is not displayed when the main content is specified as false.

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 false.

String, Boolean

-

slots

Name

Description

Scope

main

Used in the scenario where the DOM needs to be populated into props.main.

-

sub

Used in the scenario where the DOM needs to be populated into props.sub.

-

-

Used to populate content under sub.

-

events:None

Demo

Success state

Sample image

Prompt

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

Primary Action

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>