notie
notie is a clean and simple notification, input, and selection suite for javascript, with no dependencies. demo: https://jaredreich.com/notie
With notie you can:
- Alert users
- Confirm user choices
- Allow users to input information
- Allow users to select choices
- Allow users to select dates
Features
- Pure JavaScript, no dependencies, written in ES6
- Easily customizable
- Change colors to match your style/brand
- Modify styling with the sass file (notie.scss) or overwrite the CSS
- Font size auto-adjusts based on screen size
Browser Support
- IE 10+
- Chrome 11+
- Firefox 4+
- Safari 5.1+
- Opera 11.5+
Installation
HTML:
... ... <!-- Bottom of body -->
npm:
npm install notie
Usage
ES6:
// or
Browser:
notie// orwindownotie
Available methods:
notie notie notie notieinput text: String submitText: String // optional, default = 'Submit' cancelText: String // optional, default = 'Cancel' position: String // optional, default = 'top', enum: ['top', 'bottom'] submitCallback: Functionvalue // optional cancelCallback: Functionvalue // optional autocapitalize: 'words' // default: 'none' autocomplete: 'on' // default: 'off' autocorrect: 'off' // default: 'off' autofocus: 'true' // default: 'true' inputmode: 'latin' // default: 'verbatim' max: '10000'// default: '' maxlength: '10' // default: '' min: '5' // default: '' minlength: '1' // default: '' placeholder: 'Jane Smith' // default: '' spellcheck: 'false' // default: 'default' step: '5' // default: 'any' type: 'text' // default: 'text' allowed: 'an' 's' // Default: null, 'an' = alphanumeric, 'a' = alpha, 'n' = numeric, 's' = spaces allowed. Can be custom RegExp, ex. allowed: new RegExp('[^0-9]', 'g') notie notie
For example:
notienotie // Never hides unless clicked, or escape or enter is pressednotie // Hides after 2 secondsnotienotienotienotienotienotie notie notienotie notieinput text: 'Please enter your email:' submitText: 'Submit' cancelText: 'Cancel' { notie } { notie } value: 'jane@doe.com' type: 'email' placeholder: 'name@example.com' notieinput text: 'Please enter your name:' type: 'text' placeholder: 'Jane Doe' allowed: 'a' 's' { notie} { notie} notieinput text: 'Please enter the price:' { notie } { notie } type: 'text' placeholder: '500' allowed: '[^0-9]' 'g' notie { notie}
this
:
Use ES6 for nicer code and to inherit notienotienotie
Custom Styles
SASS:
// Before notie is imported: ;;;;;// See all overwriteable variables in src/notie.scss // Then import notie: ;
CSS:
/* After notie styles are applied to DOM: */
Options & Methods
// Showing all available options with defaultsnotie
// programmatically hide all alerts with an optional callback functionnotie
License
MIT