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

Genera una notificaci贸n con la funci贸n de vuesax ($vs.notification), para usar la instancia de la notificaci贸n es necesario guardarla en una variable, por ejemplo si necesitas cerrar la notificaci贸n manualmente o hacer otras funcionalidades con la instancia

Las propiedades necesarias son el title y el text o en su defecto la propiedad content

Code copied

# Position

Cambia la posici贸n de la notificaci贸n con la propiedad position

valores soportados

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

# Color

Usa la propiedad color para cambiar el color base del componente y algunos de los componentes hijos, para entender mejor el manejo de los colores y temas puedes verlo aqui

los valores permitidos son:

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

# Icons

Agrega a la notificaci贸n el icono proporcionado como valor de la propiedad icon

Code copied

# Progress New

Agrega una barra da progreso a la notificaci贸n, si el valor de la propiedad progress es auto se determinada por la propiedad duration para llegar al 100%, si quieres que el valor sea manual puedes agregar un numero de el 0 - 100 siendo 100 el 100% y usar la funci贸n en la instancia changeProgress y cambiar el valor al proporcionado como primer par谩metro

Code copied

# Duration New

Cambia la duraci贸n de la notificaci贸n con la propiedad duration, el valor es num茅rico y determina los segundos antes de ocultarse el componente osea que 10s equivale a 10000 como valor

si necesitas que la notificaci贸n no se oculte nunca el valor de duration seria none

Code copied

# Square New

Cambia el estilo de la notificaci贸n con la propiedad square para no tener border-radius haciendo que sea un rect谩ngulo

Code copied

# Border New

Cambia el estilo de la notificaci贸n con la propiedad border agregando un borde de el color proporcionado como valor

Code copied

# Flat New

Cambia el estilo de la notification con la propiedad flat, al tener esta propiedad cambia a colores a mas claros y el texto del color de la propiedad color, esta propiedad es un boolean por lo que solo puedes usar el valor true

Code copied

# Loading New

Agrega una animaci贸n de loading a la notificaci贸n, al tener esta propiedad solo se va a mostrar la animaci贸n y el contenido va a estar oculto

Code copied

# Width New

Cambia el tama帽o de la notificaci贸n al total de la pantalla con la propiedad width y d谩ndole un valor de 100%

Si necesitas que la notificaci贸n tenga un tama帽o autom谩tico a su contenido puedes hacerlo con el valor auto

Code copied

# Sticky New

Puedes agregar un estilo al componente de pegado a la esquina mas cercana con la propiedad sticky, esta propiedad es un boolean po lo que solo puede tener el valor true

Code copied

# Example New

Puedes hacer cosas geniales con este componente y algunos otros de vuesax, para agregar cualquier elemento dentro de la notificaci贸n tenemos la propiedad content esta propiedad solo puede recibir un componente importado y es lo que va a generar dentro de la notificaci贸n

Code copied

# API

props

Property Type Values Description default Example More
title String String Agrega un titulo a la notificaci贸n. 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 Agrega el texto a la notificaci贸n. 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 Cambia la position de el componente. 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 Cambia el color base de todo el componente. 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 Agrega un border de color a la notificaci贸n. 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 Agrega un icono a la notificaci贸n. 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 Determina el tiempo hasta que la notificaci贸n se oculte (none determina el no ocultarse). 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 funci贸n que se ejecuta el hacerse click en la notificaci贸n. 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 Determina si la notificaci贸n tiene el bot贸n de close. 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 Cambia el estilo de la notificaci贸n a 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 Funci贸n que se ejecuta al destruirse la notificaci贸n. 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 Cambia la posici贸n de la notificaci贸n pegada a la esquina mas cercana. 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 Determina si la notificaci贸n es cuadrada y elimina los 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 Determina el ancho de la notificaci贸n. 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 Determina si la notificaci贸n tiene una animaci贸n de cargando. 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 Agrega una barra de progreso a la notificaci贸n. 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 Elimina de la notificaci贸n el padding. 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 Determina si al hacer click en la notificaci贸n se cierra. 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 Cambia el contenido de la notificaci贸n por el proporcionado como valor (algo parecido a un slot de vue). 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 Cierra la notificaci贸n. 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 Cambia el valor de progreso de la notificaci贸n despu茅s de instanciar. 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 Cambia el estado de loading despu茅s de instanciar. 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 Agrega o elimina la clase pasada como par谩metro a la notificaci贸n. 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')
        }, 2000)
      }
    }
  }
</script>
classNotification String String Agrega una clase personalizada a la notificaci贸n. 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')
        }, 2000)
      }
    }
  }
</script>
Last Updated: 3/3/2020 3:21:13

Radio