All Products
Search
Document Center

Mobile Platform as a Service:Inform

Last Updated:Mar 04, 2022

This topic describes different methods of using the Inform component and the API descriptions:

This topic describes different methods of using the Inform 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="{ Inform }" src="@alipay/antui-vue" ></dependency>

ESModule

import { Inform } from '@alipay/antui-vue';

API description

props

Property

Description

Type

Default value

operation

Available actions for notifications. Valid values: Go and Button.

String

null

buttonText

The button text that is displayed when operation is set to button.

String

'Got it'

href

Redirection upon tapping. Valid when operation is set to go.

String

null

slots

Name

Description

Scope

-

Notification content

-

button

When operation is set to button, the content of buttonText can be customized as DOM.

-

events

Name

Description

Function

buttonClick

Triggered when a button is tapped.

Function(): void

Demo

The following shows a sample for a basic style Inform notice.

Sample image

Got it

Sample code

<template>
  <div>
    <Inform
      :style="{visibility: visible ? 'visible' : 'hidden'}"
      operation="button"
      buttonText="Got It"
      @buttonClick="visible = false"
    >
      Do not leak your password to avoid fraud and theft
    </Inform>
    <Inform
      operation="go"
      href="https://alipay.com/"
    >
      Do not leak your password to avoid fraud and theft
    </Inform>
    <Inform>
      Do not leak your password to avoid fraud and theft
    </Inform>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: true,
      };
    },
  };
</script>