Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/undead25/alerty
A simple, light and pretty pure javascript for developing browser dialogs and notifications which is following Google's Material Design guidelines. Obviously, it is responsive and no need other library
https://github.com/undead25/alerty
dialog material-design notifications pure-javascript toast
Last synced: 3 months ago
JSON representation
A simple, light and pretty pure javascript for developing browser dialogs and notifications which is following Google's Material Design guidelines. Obviously, it is responsive and no need other library
- Host: GitHub
- URL: https://github.com/undead25/alerty
- Owner: undead25
- License: mit
- Created: 2016-08-03T18:14:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-10-12T08:54:31.000Z (over 2 years ago)
- Last Synced: 2024-10-27T21:35:19.029Z (3 months ago)
- Topics: dialog, material-design, notifications, pure-javascript, toast
- Language: JavaScript
- Size: 94.7 KB
- Stars: 39
- Watchers: 4
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alerty [](https://www.npmjs.org/package/alerty)
A simple, light and pretty pure javascript for developing browser dialogs and notifications which is following Google's Material Design guidelines. Obviously, it is responsive and no need other library.
## Usage
you can install alerty with npm
```bash
npm install alerty
```
```js
var alerty = require('alerty');
```
or with bower
```bash
bower install alerty
```
Alternatively, download the package and reference the JavaScript and CSS files manually:
```html
```
## Examples
you can run example local with gulp if node has been installed:
```bash
cd alerty
npm install
gulp
```
or test it on [jsfiddle](https://jsfiddle.net/fzwporfe/)
## Usage
>For alert dialog
```js
alerty.alert('Hello, World!');
```
>For toasts
```js
alerty.toasts('Something has been done!');
```
>For confirm dialog
```js
alerty.confirm('Are you sure?', funtion() {
console.log('ok callback'); // do something
}, function(){
console.log('cancel callback'); // do something
})
```
>For prompt dialog
```js
alerty.prompt(
'Please write some thing',
{
inputType: 'email', // input type
inputPlaceholder: 'fill the blank'
},
function(value){
alerty.alert('value you typed is: '+value+'')
}
)
```
## API
### alerty.toasts(content[, opts], callback)
|param|type|description|
|-----|----|-----------|
|content|string|message to display|
|opts|object|options, optional|
|callback|function|callback after alerty closed|
**opts:**
|name|type|default|description|
|----|----|-------|-----------|
|place|string|'bottom'|'top' can be choosed|
|bgColor|string|'#323232'|background color of dialog body|
|fontColor|string|'#fff'|font color of dialog message|
|time|number|2000|time delay for dialog auto closed|
----------
### alerty.alert(content[, opts], onOk)
|param|type|description|
|-----|----|-----------|
|content|string|message to display|
|opts|object|options, optional|
|onOk|function|callback after click ok button|
**opts:**
|name|type|default|description|
|----|----|-------|-----------|
|title|string|''|title of dialog|
|okLabel|string|确定|ok button text|
----------
### alerty.confirm(content[, opts], onOk, onCancel)
|param|type|description|
|-----|----|-----------|
|content|string|message to display|
|opts|object|options|
|onOk|function|callback after click ok button|
|onCancel|function|callback after click cancel button|
**opts:**
|name|type|default|description|
|----|----|-------|-----------|
|title|string|''|title of dialog|
|okLabel|string|确定|ok button text|
|cancelLabel|string|取消|cancel button text|
----------
### alerty.prompt(content[, opts], onOk, onCancel)
|param|type|description|
|-----|----|-----------|
|content|string|message to display|
|opts|object|options|
|onOk|function|callback after click ok button, argument value, like above example|
|onCancel|function|callback after click cancel button|
**opts:**
|name|type|default|description|
|----|----|-------|-----------|
|title|string|''|title of dialog|
|okLabel|string|确定|ok button text|
|cancelLabel|string|取消|cancel button text|
|inputType|string|'text'|input type, such as 'password', 'email'|
|inputPlaceholder|'text'|''|input placeholder text|
|inputValue|'text'|''|default input value|
## Browser support
Alerty is tested and works in:
- IE8+
- Latest Stable: Firefox, Chrome, Safari, Edge
- Android 4.0 and Latest
- iOS7 and Latest
## Contributing
If you have good ideas or suggestions, please issue or pull request
## License
Alerty is licensed under [MIT](http://http://opensource.org/licenses/MIT "MIT")