Toast for Framework7

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

<link rel="stylesheet" href="toast.css"></link>

And add script after Framework7 script reference:

<script src="toast.js"></script>

2) Create a new instance

var app = new Framework7();
var toast = app.toast('Marked star', '<div>☆</div>', {})

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 :-)

4 thoughts on “Toast for Framework7

  1. Martin says:

    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!

Leave a Reply