Notification

Notification

Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax 3.x

It generates a notification with the vuesax function ($vs.notification), to use the instance of the notification it is necessary to save it in a variable, for example if you need to close the notification manually or do other functionalities with the instance

The necessary properties are the title and thetext or failing the content property

Code copied

Position

Change the notification position with the position property

supported values

  • bottom-right Default
  • top-right
  • top-center
  • top-left
  • bottom-left
  • bottom-center
Code copied

Color

Use the color property to change the base color of the component and some of the child components, to better understand the handling of colors and themes you can see it here

Allowed values ​​are:

  • primary
  • success
  • danger
  • warning
  • dark
  • RGB
  • HEX
Code copied

Icons

Add the icon provided as the value of the icon property to the notification

Code copied

Progress New

Add a progress bar to the notification, if the value of the progress property is auto be determined by the duration property to reach 100%, if you want the value to be manual you can add a number of the (0 - 100) being 100 100% and use the function in the changeProgress instance and change the value to the one provided as the first parameter

Code copied

Duration New

Change the duration of the notification with the duration property, the value is numerical and determine the seconds before the bone component is hidden that 10s equals 10000 as the value

if you need the notification to never be hidden, the duration value would be none

Code copied

Square New

Change the style of the notification with the square property so as not to have border-radius making it a rectangle

Code copied

Border New

Change the notification style with the border property by adding a border of the color provided as the value

Code copied

Flat New

Change the style of the notification with the flat property, having this property changes to lighter colors and the text of the color of the color property, this property is a boolean so you can only use the value true

Code copied

Loading New

Add a loading animation to the notification, having this property will only show the animation and the content will be hidden

Code copied

Width New

Change the size of the notification to the total screen with the property width and giving it a value of 100%

If you need the notification to have an automatic size to your content you can do it with the value auto

Code copied

Sticky New

You can add a style to the paste component to the nearest corner with the sticky property, this property is a boolean po which can only have the value true

Code copied

Example New

You can do great things with this component and some others from vuesax, to add any element within the notification we have the property content this property can only receive an imported component and that is what it will generate within the notification

Code copied

API

props

Property Type Values Description default Example More
title String String Add a title to the notification. Usage Open Close
this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`
})
text String String Add the text to the notification. Usage Open Close
this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`
})
position String bottom-righttop-righttop-centertop-leftbottom-leftbottom-center Change the position of the component. bottom-right Usage Open Close
const noti = this.$vs.notification({
  position: 'top-right',
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`
})
color String vuesax colors rgb hex Change the base color of the entire component. Usage Open Close
const noti = this.$vs.notification({
  color: 'primary',
  title: 'Documentation Vuesax 4.0+',
  text: 'These documents refer to the latest version of vuesax (4.0+), to see the
  documents of the previous versions you can do it here πŸ‘‰ Vuesax 3.x'
})
border String vuesax colors rgb hex Add a color border to the notification. Usage Open Close
const noti = this.$vs.notification({
  border: 'success',
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`
})
icon String String Add an icon to the notification. Usage Open Close
const noti = this.$vs.notification({
  icon: `<i class='bx bxs-time'></i>`,
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`
})
duration Number, String Number none Determine the time until the notification is hidden (none determines not to hide). 4000 (4s) Usage Open Close
const noti = this.$vs.notification({
  duration: 10000,
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`
})
onClick function function function that is executed by clicking on the notification. Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  onClick: () => {
    console.log('click notification')
  }
})
buttonClose Boolean truefalse Determine if the notification has the close button. true Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  buttonClose: false
})
flat Boolean truefalse Change the notification style to flat. false Usage Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  flat: true
})
onDestroy function function Function that is executed when the notification is destroyed. Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  onDestroy: () => {
    console.log('destroy notification')
  }
})
sticky boolean truefalse Change the position of the notification attached to the nearest corner. false Usage Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  sticky: true
})
square boolean truefalse Determine if the notification is square and remove the border-radius. false Usage Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  square: true
})
width String 100% auto Determine the width of the notification. 340px Usage Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  width: 100%
})
loading boolean truefalse Determine if the notification has a loading animation. false Usage Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  loading: true
})
progress Number, String 0 - 100 auto Add a progress bar to the notification. Usage Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  progress: 'auto'
})
notPadding Boolean truefalse Remove padding from notification. 20px Usage Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  notPadding: true
})
clickClose Boolean truefalse Determine if clicking on the notification closes. false Open Close
const noti = this.$vs.notification({
  title: 'Documentation Vuesax 4.0+',
  text: `These documents refer to the latest version of vuesax (4.0+),
  to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
  clickClose: true
})
content Vue Component Vnode Change the content of the notification to the one provided as a value (something similar to a vue slot). Usage Open Close
<script>
  import user from './user.vue'
  export default {
    methods: {
      openNotificationUser() {
        const noti = this.$vs.notification({
          duration: 'none',
          width: 'auto',
          content: user,
        })
      }
    }
  }
</script>
instance.close() function Close the notificationn. Open Close
<script>
  export default {
    methods: {
      openNotification() {
        const noti = this.$vs.notification({
          duration: 'none',
          loading: true
        })

        setTimeout(() => {
          noti.close()
        }, 5000)
      }
    }
  }
</script>
instance.changeProgress(value) function 0 - 100 Change the notification progress value after instantiation. Open Close
<script>
  export default {
    methods: {
      openNotification() {
        const noti = this.$vs.notification({
          title: 'Documentation Vuesax 4.0+',
          text: `These documents refer to the latest version of vuesax (4.0+),
          to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
          progress: 0
        })

        setTimeout(() => {
          noti.changeProgress(50)
        }, 5000)
      }
    }
  }
</script>
instance.setLoading(boolean) function truefalse Change the status of loading after instantiating. Open Close
<script>
  export default {
    methods: {
      openNotification() {
        const noti = this.$vs.notification({
          title: 'Documentation Vuesax 4.0+',
          text: `These documents refer to the latest version of vuesax (4.0+),
          to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
        })

        setTimeout(() => {
          noti.setLoading(true)
        }, 5000)
      }
    }
  }
</script>
instance.toggleClass(String) function String Add or remove the last class as a parameter to the notification. Open Close
<script>
  export default {
    methods: {
      openNotification() {
        const noti = this.$vs.notification({
          classNotification: 'my-class'
          title: 'Documentation Vuesax 4.0+',
          text: `These documents refer to the latest version of vuesax (4.0+),
          to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
        })

        setTimeout(() => {
          noti.toggleClass('new-class')
        }, 5000)
      }
    }
  }
</script>
classNotification String String Add a custom class to the notification. Open Close
<script>
  export default {
    methods: {
      openNotification() {
        const noti = this.$vs.notification({
          classNotification: 'my-class'
          title: 'Documentation Vuesax 4.0+',
          text: `These documents refer to the latest version of vuesax (4.0+),
          to see the documents of the previous versions you can do it here πŸ‘‰ Vuesax3.x`,
        })

        setTimeout(() => {
          noti.toggleClass('new-class')
        }, 5000)
      }
    }
  }
</script>
Last Updated: 3/3/2020, 3:21:13 AM