{"id":13784276,"url":"https://github.com/ile/derby-ui-toast","last_synced_at":"2026-01-05T15:58:04.617Z","repository":{"id":10049154,"uuid":"12096972","full_name":"ile/derby-ui-toast","owner":"ile","description":"Notification messages for Derby","archived":false,"fork":false,"pushed_at":"2014-10-31T23:39:08.000Z","size":344,"stargazers_count":3,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T03:35:12.145Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://derby-demos.herokuapp.com/derby-ui-toast","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ile.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-14T01:20:50.000Z","updated_at":"2014-11-01T16:03:59.000Z","dependencies_parsed_at":"2022-07-12T15:03:55.012Z","dependency_job_id":null,"html_url":"https://github.com/ile/derby-ui-toast","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ile%2Fderby-ui-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ile%2Fderby-ui-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ile%2Fderby-ui-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ile%2Fderby-ui-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ile","download_url":"https://codeload.github.com/ile/derby-ui-toast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253621283,"owners_count":21937498,"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":[],"created_at":"2024-08-03T19:00:39.048Z","updated_at":"2026-01-05T15:58:04.589Z","avatar_url":"https://github.com/ile.png","language":"CSS","funding_links":[],"categories":["Components"],"sub_categories":[],"readme":"#derby-ui-toast\r\n\r\nNotification messages ([toasts](http://en.wikipedia.org/wiki/Toast_(computing\\))) for Derby.\r\n\r\n![toast](https://f.cloud.github.com/assets/433707/966450/571f6b72-0549-11e3-946b-8b062879d7c5.png)\r\n\r\n##Requirements\r\n\r\n- [Node.js](http://nodejs.org)\r\n- [Derby](http://derbyjs.com/)\r\n\r\n\r\n##Demo\r\n\r\nhttps://derby-demos.herokuapp.com/derby-ui-toast\r\n\r\n##Installation\r\n\r\nUsing [npm](https://npmjs.org/)\r\n\r\n`npm install derby-ui-toast`\r\n\r\n\r\n##Usage\r\n\r\n###Add CSS\r\n\r\nFirst you have to import the base CSS:\r\n```css\r\n@import '../../node_modules/derby-ui-toast/css/'\r\n```\r\n\r\nIf you want to use the default background images on the notification boxes:\r\n```css\r\n@import '../../node_modules/derby-ui-toast/css/bg-images.css'\r\n```\r\n\r\nOr if you want to use the Font Awesome icons:\r\n\r\n```css\r\n@import '../../node_modules/derby-ui-toast/css/bg-fontawesome.css'\r\n```\r\n\r\n###Add JS\r\n\r\nAlso you have to enable the component in JavaScript:\r\n\r\n```javascript\r\napp.component(require('derby-ui-toast'));\r\n```\r\n\r\n###Add HTML\r\n\r\nAnd in HTML:\r\n\r\n```html\r\n\u003cview name=\"derby-ui-toast\"\u003e\u003c/view\u003e\r\n```\r\n\r\n###Adding messages\r\n\r\n```javascript\r\nmodel.toast(type, message, options);\r\n```\r\n\r\n*type* : string, the default possibilities are:\r\n\r\n- 'info'\r\n- 'success'\r\n- 'warning'\r\n- 'error'\r\n\r\n*message*: string\r\n\r\n*options*: object\r\n\r\n### options\r\n\r\n- *sticky*  \r\n\tdefault: false\r\n- *timeout*  \r\n\tdefault: 5000\r\n- *click*  \r\n\tdefault: none\r\n\r\n####This will also work:\r\n\r\n```javascript\r\nmodel.toast({ info: 'Info message' }, options);\r\nmodel.toast({ success: 'Success message' });\r\n```\r\n\r\n###Examples:\r\n\r\n```javascript\r\nmodel.toast('info', 'Everything is ok!');\r\nmodel.toast('success', 'It worked!');\r\nmodel.toast('warning', 'Beware!');\r\nmodel.toast('error', 'An error happened!', { sticky: true });\r\nmodel.toast('error', 'An error happened again!', { timeout: 1000 });\r\nmodel.toast('error', 'And again!', { click: myFunction });\r\nmodel.toast({ info: 'Info message' });\r\n```\r\n\r\n\r\n###Removing messages\r\n\r\nMessages will disappear in 5 seconds by default. They can also be removed by clicking the message dialog box.\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2File%2Fderby-ui-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2File%2Fderby-ui-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2File%2Fderby-ui-toast/lists"}