Alert
Demos
Types
Alert
component has 4 contextual types, which are success
, info
, warning
and error
. Types are specified with the type
prop.
Messages can either be specified in the default slot, or via the message
prop.
<template>
<article>
<veui-alert type="success">
Your profile has been updated.
</veui-alert>
<veui-alert type="info">
Press any key to continue...
</veui-alert>
<veui-alert type="warning">
<code>scope</code> is deprecated. Use <code>slot-scope</code> instead.
</veui-alert>
<veui-alert
type="error"
message="Uncaught SyntaxError: Unexpected token +"
/>
</article>
</template>
<script>
import { Alert } from 'veui'
export default {
components: {
'veui-alert': Alert
}
}
</script>
Multiple messages
message
prop can be an array to display multiple switchable messages.
1/4
Set closable
prop to true
to allow the alert message to be closed by users. You can also use close-label
to make the close button shown as specified text.
<template>
<article>
<veui-alert
type="info"
close-label="Got it"
closable
:open.sync="open"
:message="messages"
/>
<section v-if="!open">
<veui-button @click="open = true">
Open
</veui-button>
</section>
</article>
</template>
<script>
import { Alert, Button } from 'veui'
export default {
components: {
'veui-alert': Alert,
'veui-button': Button
},
data () {
return {
open: true,
messages: [
'Component data must be a function.',
'Prop definitions should be as detailed as possible.',
'Always use key with v-for.',
'Never use v-if on the same element as v-for.'
]
}
}
}
</script>
API
Props
Name | Type | Default | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | string | 'success' | The contextual type of the alert message.
| ||||||||||
message | string|Array<string> | - | The alert message. When specified as an array, multiple messages will be displayed with previous/next navigation. | ||||||||||
closable | Boolean | false | Whether the alert is allowed to be closed by users. | ||||||||||
close-label | string | - | Use text to replace the close button. eg. “Never show again”. | ||||||||||
open | boolean | true |
Whether the message is displayed. | ||||||||||
index | number | 0 |
The index of current message displayed when having multiple messages. |
Slots
Name | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
default | The content of the message. Default: message text.
| |||||||||
content | The content of the whole component, including message text, status icon, previous/next navigation and close button. |
Icons
Name | Description |
---|---|
success | Success message. |
warning | Warning message. |
info | Information message. |
error | Error message. |
prev | Previous message. |
next | Next message. |
close | Close alert. |