{"id":22270243,"url":"https://github.com/valnub/toast-for-framework7","last_synced_at":"2025-07-28T13:31:56.291Z","repository":{"id":29836881,"uuid":"33381586","full_name":"valnub/Toast-for-Framework7","owner":"valnub","description":"A toast component plugin for iOS Framework7","archived":false,"fork":false,"pushed_at":"2018-02-22T08:08:51.000Z","size":449,"stargazers_count":43,"open_issues_count":0,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-16T05:52:42.364Z","etag":null,"topics":["css","framework7","html","javascript","plugin","toast"],"latest_commit_sha":null,"homepage":"http://www.timo-ernst.net/2015/04/toast-for-framework7/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/valnub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-03T20:31:40.000Z","updated_at":"2023-12-07T06:12:48.000Z","dependencies_parsed_at":"2022-09-07T00:52:17.880Z","dependency_job_id":null,"html_url":"https://github.com/valnub/Toast-for-Framework7","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valnub%2FToast-for-Framework7","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valnub%2FToast-for-Framework7/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valnub%2FToast-for-Framework7/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valnub%2FToast-for-Framework7/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valnub","download_url":"https://codeload.github.com/valnub/Toast-for-Framework7/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227914255,"owners_count":17839245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","framework7","html","javascript","plugin","toast"],"created_at":"2024-12-03T12:07:50.299Z","updated_at":"2024-12-03T12:07:50.868Z","avatar_url":"https://github.com/valnub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Toast for Framework7\n\nA plugin for Framwork7 to show little black toasts iOS-style\n\n## F7 Compatibility\n- V1: Yes\n- V2: No (Toast already [included](http://framework7.io/docs/toast.html) in F7 v2 core components)\n\n## Screenshot\n\n![Confirmbox screenshot](http://www.timo-ernst.net/wp-content/uploads/2015/04/toast-screenshot-169x300.png)\n\n## Video\n\nhttps://www.youtube.com/watch?v=1qCRmpyQCuw\u0026feature=youtu.be\n\n## Live demo\n\nhttp://www.timo-ernst.net/misc/toastdemo/\n\n## How to use\n\n### 1. Add the script to your project (after Framework7 script!) and also add CSS reference:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"toast.css\"\u003e\n\u003cscript src=\"toast.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Create a new toast\n\nYou can create a new toast with a icon:\n\n```javascript\nvar app = new Framework7();\nvar options = {};\nvar toast = app.toast('Marked star', '\u003cdiv\u003e☆\u003c/div\u003e', options);\n```\n\nAs 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.\n\nIf you just want to show a message, let 2nd parameter empty:\n\n```javascript\nvar app = new Framework7();\nvar options = {};\nvar toast = app.toast('A long long message', '', options);\n```\n\n### 3. Now you can show or hide the box:\n\n```javascript\n// show\ntoast.show();\n\n// hide\ntoast.hide();\n```\n\n***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.*\n\nYou can also change what message is displayed **after** initialization:\n\n```javascript\ntoast.show(\"message\");\n```\n\n### 4. Options \u0026 Callbacks\n\nYou can set the following options:\n\n```javascript\nvar app = new Framework7();\nvar options = {\n  // Callback gets called when toast is hidden\n  onHide: function () {\n    console.log('hidden');\n  },\n  duration: 2000 // Hide toast after 2 seconds\n};\nvar toast = app.toast('Marked star', '\u003cdiv\u003e☆\u003c/div\u003e', options);\n```\n\nYou're done :D\n\nMade with \u003c3 by www.timo-ernst.net\n\n## License\n\nMIT - Do what ever you want ;-)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalnub%2Ftoast-for-framework7","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalnub%2Ftoast-for-framework7","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalnub%2Ftoast-for-framework7/lists"}