We can change the place where the notification appears with the property position. A practical example would be: position: 'top-right'. The supported values are
The default notifications appear bottom-right
, it is not necessary to add the position property if it is the desired position
Position Default
Position Top Right
Position Top Left
Position Bottom Left
Position Bottom Center
Position Top Center Random Color
<template>
<div class="demo-alignment">
<vs-button color="primary" type="flat"
@click="$vs.notify({
title:'Position Default',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'primary'})">Position Default</vs-button>
<vs-button color="success" type="flat"
@click="$vs.notify({
title:'Position top-right',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'success',
position:'top-right'})">Position Top Right</vs-button>
<vs-button color="danger" type="flat"
@click="$vs.notify({
title:'Position top-left',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'danger',
position:'top-left'})">Position Top Left</vs-button>
<vs-button color="warning" type="flat"
@click="$vs.notify({
title:'Position bottom-left',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'warning',
position:'bottom-left'})">Position Bottom Left</vs-button>
<vs-button color="dark" type="flat"
@click="$vs.notify({
title:'Position bottom-center',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'dark',
position:'bottom-center'})"> Position Bottom Center</vs-button>
<vs-button @click="randomCenter()" color="success" type="gradient">Position Top Center Random Color</vs-button>
</div>
</template>
<script>
export default {
methods: {
randomCenter() {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
let color = `rgb(${getRandomInt(0,255)},${getRandomInt(0,255)},${getRandomInt(0,255)})`
this.$vs.notify({ title: 'Position top-center', text: 'Lorem ipsum dolor sit amet, consectetur', color: color, position: 'top-center' })
}
}
}
</script>