Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ile/derby-ui-toast
Notification messages for Derby
https://github.com/ile/derby-ui-toast
Last synced: 26 days ago
JSON representation
Notification messages for Derby
- Host: GitHub
- URL: https://github.com/ile/derby-ui-toast
- Owner: ile
- License: mit
- Created: 2013-08-14T01:20:50.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-10-31T23:39:08.000Z (about 10 years ago)
- Last Synced: 2024-09-18T11:02:54.614Z (3 months ago)
- Language: CSS
- Homepage: https://derby-demos.herokuapp.com/derby-ui-toast
- Size: 336 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-derby - derby-ui-toast - Notification messages for Derby (Components)
README
#derby-ui-toast
Notification messages ([toasts](http://en.wikipedia.org/wiki/Toast_(computing\))) for Derby.
##Requirements
- [Node.js](http://nodejs.org)
- [Derby](http://derbyjs.com/)
##Demo
https://derby-demos.herokuapp.com/derby-ui-toast
##Installation
Using [npm](https://npmjs.org/)
`npm install derby-ui-toast`
##Usage
###Add CSS
First you have to import the base CSS:
```css
@import '../../node_modules/derby-ui-toast/css/'
```
If you want to use the default background images on the notification boxes:
```css
@import '../../node_modules/derby-ui-toast/css/bg-images.css'
```
Or if you want to use the Font Awesome icons:
```css
@import '../../node_modules/derby-ui-toast/css/bg-fontawesome.css'
```
###Add JS
Also you have to enable the component in JavaScript:
```javascript
app.component(require('derby-ui-toast'));
```
###Add HTML
And in HTML:
```html
```
###Adding messages
```javascript
model.toast(type, message, options);
```
*type* : string, the default possibilities are:
- 'info'
- 'success'
- 'warning'
- 'error'
*message*: string
*options*: object
### options
- *sticky*
default: false
- *timeout*
default: 5000
- *click*
default: none
####This will also work:
```javascript
model.toast({ info: 'Info message' }, options);
model.toast({ success: 'Success message' });
```
###Examples:
```javascript
model.toast('info', 'Everything is ok!');
model.toast('success', 'It worked!');
model.toast('warning', 'Beware!');
model.toast('error', 'An error happened!', { sticky: true });
model.toast('error', 'An error happened again!', { timeout: 1000 });
model.toast('error', 'And again!', { click: myFunction });
model.toast({ info: 'Info message' });
```
###Removing messages
Messages will disappear in 5 seconds by default. They can also be removed by clicking the message dialog box.