ale
alerty
npm i alerty
ale

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

by 邪无神

0.0.1 (see all)License:MITTypeScript:Not FoundCategories:Vanilla JavaScript Dialog, Vanilla JavaScript Toast
npm i alerty
Readme

Alerty npm

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)

paramtypedescription
contentstringmessage to display
optsobjectoptions, optional
callbackfunctioncallback after alerty closed

opts:

nametypedefaultdescription
placestring'bottom''top' can be choosed
bgColorstring'#323232'background color of dialog body
fontColorstring'#fff'font color of dialog message
timenumber2000time delay for dialog auto closed

alerty.alert(content[, opts], onOk)

paramtypedescription
contentstringmessage to display
optsobjectoptions, optional
onOkfunctioncallback after click ok button

opts:

nametypedefaultdescription
titlestring''title of dialog
okLabelstring确定ok button text

alerty.confirm(content[, opts], onOk, onCancel)

paramtypedescription
contentstringmessage to display
optsobjectoptions
onOkfunctioncallback after click ok button
onCancelfunctioncallback after click cancel button

opts:

nametypedefaultdescription
titlestring''title of dialog
okLabelstring确定ok button text
cancelLabelstring取消cancel button text

alerty.prompt(content[, opts], onOk, onCancel)

paramtypedescription
contentstringmessage to display
optsobjectoptions
onOkfunctioncallback after click ok button, argument value, like above example
onCancelfunctioncallback after click cancel button

opts:

nametypedefaultdescription
titlestring''title of dialog
okLabelstring确定ok button text
cancelLabelstring取消cancel button text
inputTypestring'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

Downloads/wk

6

GitHub Stars

35

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
0.0.1
latest
6yrs ago
No tutorials found
Add a tutorial