Vuetify: Toast class but no Toast component ? Feature in progress or ?

[darkylmnx]

i recently saw the snackbar feature added but still no toast service (alerts / notification based on the alerts component)

i'v seen a Toast class but nothing on the docs on how to use it

sommething like : http://astaroverov.github.io/#!/open-source/vue-toast but for vuetify

[johnleider]

The snackbar is a toast. I'm not sure what you are asking.

[darkylmnx]

the snackbar is not miltiple as toasts (to show error, success and warning messages or notifications), and snakcbar are not themable.

am i being more clear ?

[johnleider]

You can do all of those things with a snackbar, which is why I said I wasn't sure what you were asking. Can you provide an example of what you are trying to do but cannot?

[darkylmnx]

well hard to explain more than i did : http://astaroverov.github.io/#!/open-source/vue-toast

The snackbar on vuetify is not themable like alert that's what i'm saying and it should be a service + a component not only a component as the link posted above

[darkylmnx]

something like

this.$root.$refs.toast.showToast('a simple toast', {
        theme: 'primary',
        timeLife: 3000,
        closable: true
})

[johnleider]

As far as it being a function, we moved Toasts from a function to a component because the developer can now customize. As far as changing color, I just tested and this can be solved with a simple change on my end where you could do <v-snackbar class="red"> for example. I'll do that later today.

[darkylmnx]

the function example i showed seem very simple too and customisable. With the current toast, the developer would need to add some logic to handle multiple ones (currently i'd have to generate the snackbar via a v-for, manage each v-model of each snackbar etc, because if i have 10 notifications it would be very poor in perf to just "hide it" with v-model=false)

checkout the exemple i showed you, there's also a component but the component is just used as the element node starting point.

this is another exemple done by a Vue core member : https://jsfiddle.net/Linusborg/wnb6tdg8/

[johnleider]

I'm going to add the ability to change the background, but as far as it being a function, I'm still happy with our decision. As far as a performance hit, the Snackbar is extremely light with under a 2ms patch time in most situations, looping and showing based upon your own array would not hinder your application, in my opinion.

Also, snackbars will automatically close on their own and the value can be just passed as true in your iteration.

[darkylmnx]

i see, thanks

2017-03-22 19:29 GMT+01:00 John Leider [e-mail]:

I'm going to add the ability to change the background, but as far as it
being a function, I'm still happy with our decision. As far as a
performance hit, the Snackbar is extremely light with under a 2ms patch
time in most situations, looping and showing based upon your own array
would not hinder your application, in my opinion.

Also, snackbars will automatically close on their own and the value can be
just passed as true in your iteration.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/251#issuecomment-288495738,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABXDtb_7yPyNJye4NOg448tgNy7BuYVtks5roWijgaJpZM4MlifS
.

--
Cordialement [email protected]

[mfferreira]

@darkylmnx fyi, following the Material Design spec:

• "toast" is just the name on Android for snackbar
• snackbar are not supposed to be stacked, so only one should be visible at a time

You can read more about it here: Components– Snackbars & toasts

[darkylmnx]

@mfferreira after some deep reading on the spec that's what i finally understood but as vuetify is not focused EXACTLY on the spec i thought it would be a good feature :)

[johnleider]

Vuetify is very much focused EXACTLY on the spec. Anything lacking atm is being refactored.

[darkylmnx]

oh i see, thanks for the info.

2017-03-24 1:41 GMT+01:00 John Leider [e-mail]:

Vuetify is very much focused EXACTLY on the spec. Anything lacking atm is
being refactored.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/251#issuecomment-288901668,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABXDtSYVtK3DircHkVI1pIm64Jx__QUUks5roxEtgaJpZM4MlifS
.

--
Cordialement [email protected]

[SarasArya]

I have a question here. I have a use case in which instead of writing snack bar components all over the place, I want to declare in my app top component and call it from my actions, say on login failure, or data fetch failure. Is this possible in the current scenario

[Chris0lsen]

@SarasArya Here's what I did - I wrote an 'alerts' component, and included it in my main App.vue file, and used Vuex to detect when to show the alert. It looks something like this:

<template lang="pug"> 
  v-app                                                            
    alerts(app)                                                         
    main(:class="bgDisplay")                                               
      v-content                                                              
        v-container(fluid)                                                   
          v-layout(justify-center align-center)                             
            router-view                                                      
    v-footer(color="primary" app)                                             
</template>

and alerts is simply:

<template lang="pug">
  v-snackbar(
    :color="messageType"
    top="true"
    :timeout="3000"
    v-model="showAlert"
  ) {{message}}
</template>

showAlert is set to true after each AJAX call, and I have my API returning "success", "info" or "error" for the messageType. So far so good.

[ad34]

Just found this issue, I m new to vue.js & vuetify and I think an exemple to show a toast programmatically would be nice (to display errors, notifications etc..)

[byrontuckett]

@ad34 @SarasArya check out this https://github.com/pzs/vuetify-toast
no-one badger him for calling it toast either...

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord