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: | String |
|
buttonText | The button text that is displayed when | String |
|
href | Redirection upon tapping. Valid when | String |
|
slots
Name | Description | Scope |
---|---|---|
- | Notification content | - |
button | When | - |
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
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>