I noticed that Framework7 lacks a component like this:
So, in order to learn how to create a F7 plugin I did this little thing.
Check it out
- Live demo here
- Video :D https://youtu.be/1qCRmpyQCuw
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 :-)
Can we add emoji in toast message?
Hi, since emojis are just ascii letters, it should work in theory, yes. But I have never tried it :-)
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!
Hi, yes you can upload to Codepen and then post the link to an issue in the Github Repo.
ِHi Timo, does this plugin support style for using in android app like material design. There is no mention of android platform.
@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.