I noticed that Framework7 lacks a component like this:

Toast plugin screenshot

So, in order to learn how to create a F7 plugin I did this little thing.

Check it out

How to use Toast

This is gonna be a no-brainer, trust me.

1) Add stylesheet to head


And add script after Framework7 script reference:


2) Create a new instance

var app = new Framework7();
var toast = app.toast('Marked star', '
', {})

As first parameter you set the message which gets displayed at the bottom. As 2nd parameter you have to set the icon. You can use free HTML here so set what ever you want (ASCii, Font-Icon, Images, SVG…). Third is reserved for options.

3) Now you can show or hide the box

// show
toast.show(true);

or

// hide
toast.show(false);

You’re done :D

Download on Github

Grab is here: https://github.com/valnub/Toast-for-Framework7

MIT License

Feel free to copy, modify, fork or do what ever you want :-)

Follow me on social media

6 thoughts on “Toast for Framework7

  1. Hi, since emojis are just ascii letters, it should work in theory, yes. But I have never tried it :-)

  2. Hello, I’m trying to use the Toast plugin. But for some reason on Framework7 it says that the Myapp.toast is not a function?
    I’m not too sure where i’ve gone wrong, since i’ve added the css and js files as you said..
    Is there a way maybe i could show you my code?
    Thanks for the help!

  3. ِHi Timo, does this plugin support style for using in android app like material design. There is no mention of android platform.

  4. @Arash Hi, I haven’t tested on Android but I think it should work. However, the look of the toast element is the same as on iOS.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.