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

Radio