deawx/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

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

npm install alerty

var alerty = require('alerty');

or with bower

bower install alerty

Alternatively, download the package and reference the JavaScript and CSS files manually:

<script src="dist/js/alerty.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/css/alerty.min.css">

Examples

you can run example local with gulp if node has been installed:

cd alerty
npm install
gulp

or test it on jsfiddle

Usage

For alert dialog

alerty.alert('Hello, World!');

For toasts

alerty.toasts('Something has been done!');

For confirm dialog

alerty.confirm('Are you sure?', funtion() {
  console.log('ok callback'); // do something
}, function(){
  console.log('cancel callback'); // do something
})

For prompt dialog

alerty.prompt(
  'Please write some thing', 
  {
    inputType: 'email', // input type
    inputPlaceholder: 'fill the blank'
  },
  function(value){
    alerty.alert('value you typed is: <b>'+value+'</b>')
  }
)

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
okLabel	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
okLabel	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