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

2 thoughts on “Toast for Framework7

Leave a Reply