Snackbars & Toasts (Component request)

ionic-v1
1

Hi all,

Just passing through quickly to see if anyone has tried to build Snackbars or Toasts in Ionic and to see if there is any support to include them as an ionic component (just like action sheets, modals, popups). It’s a way to show quick notifications that tend not to be actionable (if there is a button, it’s usually an optional ‘undo’ or ‘retry’ button, where the notification was to, say, delete a photo or send a message respectively), and will fade away after seconds and can be ignored. A popup or modal won’t do, it’s too much in the center of attention. For example, after a user logs in you’ll want to show ‘Hi username, you are now logged in’. Same for logout.

Google’s Material Design has an excellent page on what these could look like. Ionic’s version could look different of course but the same idea would apply. If you’re unfamiliar with the snackbar/toast terminology (like I was!) then please check it out!

http://www.google.com/design/spec/components/snackbars-toasts.html

I guess the toasts are sort of possible with something like this at the bottom:

But it’s not particularly configurable with messages, a button etc. The snackbars are a little bit similar to the buttons in an Action Sheet, or even a single-button popover positioned properly. It’d be nice if they too got their own component and could be configured with text, a button, color and proper positioning.

Really hoping someone’s got this working. It seems like such a common feature we could all use!

Thanks

1 Like
2

There is always the cordova plugin for native toast components.

http://ngcordova.com/docs/#Toast

2 Likes
3

I was been searching for a toast notification plugin for my project. I have created a bower component for toast. Please have a look at the bower component i have created. I tried using the $ionicLoading, but it restrict whole page to do any user actions. The one i created don’t has such drawback. It simultaneously allows the user to perform other actions in the page. I think it might help you.

4

I have created a SNACKBAR component for ionic. Please check on the market at http://market.ionic.io/plugins/ion-snackbar . I hope it is helpful. I read the guidelines and implemented the snackbar both for mobile and tablet.