Message

The message component allows to display highlighted messages to the user inside a specific section.

API

Props

NameTypeDefaultDescription
variantString''Defines the variant of the theme applied to the input component. Possible values are: danger, warning, success, info
iconString''Defines the icon to show inside the input element
closeableBooleanfalseDefines if the message can be closed manually by the user or not

Events

NameDescription
update:is-visibleEvent emitted whenever the message is shown or hidden (destroyed)

Basic Message

<template>
	<Message ref="message" />
</template>

<script>
export default {
	methods: {
		showMessage() {
			this.$refs.message.show('Example message')
		},
	},
}
</script>

Body

<template>
	<Message ref="message" />
</template>

<script>
export default {
	methods: {
		showMessage() {
			this.$refs.message.show(
				'Example message',
				'Lorem ipsum dolor sit amet, consectetur adipiscing elit.....'
			)
		},
	},
}
</script>

Closeable

<template>
	<Message ref="onlyTitle" closeable />

	<Message ref="withBody" closeable />
</template>

<script>
export default {
	methods: {
		showMessage() {
			this.$refs.onlyTitle.show('Example message')

			this.$refs.withBody.show(
				'Example message',
				'Lorem ipsum dolor sit amet, consectetur adipiscing elit.....'
			)
		},
	},
}
</script>

Variants

Simple

<template>
	<Message ref="defaultMessage" closeable />
	<Message ref="dangerMessage" variant="danger" closeable />
	<Message ref="warningMessage" variant="warning" closeable />
	<Message ref="successMessage" variant="success" closeable />
	<Message ref="infoMessage" variant="info" closeable />
</template>

<script>
export default {
	methods: {
		showMessage() {
			this.$refs.defaultMessage.show('Example message')
			this.$refs.dangerMessage.show('Example message')
			this.$refs.warningMessage.show('Example message')
			this.$refs.successMessage.show('Example message')
			this.$refs.infoMessage.show('Example message')
		},
	},
}
</script>

With Body

<template>
	<Message ref="defaultMessage" closeable />
	<Message ref="dangerMessage" closeable variant="danger" />
	<Message ref="warningMessage" closeable variant="warning" />
	<Message ref="successMessage" closeable variant="success" />
	<Message ref="infoMessage" closeable variant="info" />
</template>

<script>
export default {
	methods: {
		showMessage() {
			this.$refs.defaultMessage.show(
				'Example message',
				'Lorem ipsum dolor sit amet, consectetur adipiscing elit.....'
			)
			this.$refs.dangerMessage.show(
				'Example message',
				'Lorem ipsum dolor sit amet, consectetur adipiscing elit.....'
			)
			this.$refs.warningMessage.show(
				'Example message',
				'Lorem ipsum dolor sit amet, consectetur adipiscing elit.....'
			)
			this.$refs.successMessage.show(
				'Example message',
				'Lorem ipsum dolor sit amet, consectetur adipiscing elit.....'
			)
			this.$refs.infoMessage.show(
				'Example message',
				'Lorem ipsum dolor sit amet, consectetur adipiscing elit.....'
			)
		},
	},
}
</script>
Last Updated:
Contributors: Carlos Pereira