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.

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

NameTypeDefaultDescription
typestring'success'

The contextual type of the alert message.

ValueDescription
infoInformation message.
successSuccess message.
warningWarning message.
errorError message.
messagestring|Array<string>-The alert message. When specified as an array, multiple messages will be displayed with previous/next navigation.
closableBooleanfalseWhether the alert is allowed to be closed by users.
close-labelstring-Use text to replace the close button. eg. “Never show again”.
openbooleantrue

.sync

Whether the message is displayed.

indexnumber0

.sync

The index of current message displayed when having multiple messages.

Slots

NameDescription
default

The content of the message.

Default: message text.

NameTypeDescription
messagestringMessage text.
indexnumber=The index of current message displayed when having multiple messages.
contentThe content of the whole component, including message text, status icon, previous/next navigation and close button.

Icons

NameDescription
successSuccess message.
warningWarning message.
infoInformation message.
errorError message.
prevPrevious message.
nextNext message.
closeClose alert.