https://github.com/valnub/toast-for-framework7

A toast component plugin for iOS Framework7
https://github.com/valnub/toast-for-framework7

css framework7 html javascript plugin toast

Last synced: 30 days ago
JSON representation

A toast component plugin for iOS Framework7

• Host: GitHub
• URL: https://github.com/valnub/toast-for-framework7
• Owner: valnub
• Created: 2015-04-03T20:31:40.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-02-22T08:08:51.000Z (almost 7 years ago)
• Last Synced: 2024-04-16T05:52:42.364Z (9 months ago)
• Topics: css, framework7, html, javascript, plugin, toast
• Language: JavaScript
• Homepage: http://www.timo-ernst.net/2015/04/toast-for-framework7/
• Size: 438 KB
• Stars: 43
• Watchers: 4
• Forks: 17
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Toast for Framework7

A plugin for Framwork7 to show little black toasts iOS-style

## F7 Compatibility

- V1: Yes

- V2: No (Toast already [included](http://framework7.io/docs/toast.html) in F7 v2 core components)

## Screenshot

![Confirmbox screenshot](http://www.timo-ernst.net/wp-content/uploads/2015/04/toast-screenshot-169x300.png)

## Video

https://www.youtube.com/watch?v=1qCRmpyQCuw&feature=youtu.be

## Live demo

http://www.timo-ernst.net/misc/toastdemo/

## How to use

### 1. Add the script to your project (after Framework7 script!) and also add CSS reference:

```html

```

### 2. Create a new toast

You can create a new toast with a icon:

```javascript

var app = new Framework7();

var options = {};

var toast = app.toast('Marked star', '
☆
', options);

```


As first parameter you set the message which gets displayed at the bottom of the toast. 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.

If you just want to show a message, let 2nd parameter empty:

```javascript

var app = new Framework7();

var options = {};

var toast = app.toast('A long long message', '', options);

```

### 3. Now you can show or hide the box:

```javascript

// show

toast.show();

// hide

toast.hide();

```

***Note:*** *In older versions of this plugin these methods were `toast.show(true)` and `toast.show(false)` but these were replaced by `toast.show()` and `toast.hide()` which is a little more convenient. You might have to change this in your code though if you upgrade from an older version.*

You can also change what message is displayed **after** initialization:

```javascript

toast.show("message");

```

### 4. Options & Callbacks

You can set the following options:

```javascript

var app = new Framework7();

var options = {

  // Callback gets called when toast is hidden

  onHide: function () {

    console.log('hidden');

  },

  duration: 2000 // Hide toast after 2 seconds

};

var toast = app.toast('Marked star', '
☆
', options);

```


You're done :D

Made with <3 by www.timo-ernst.net

## License

MIT - Do what ever you want ;-)