a clean and simple notification, input, and selection suite for javascript, with no dependencies
a clean and simple notification, input, and selection suite for javascript, with no dependencies
notie is a clean and simple notification, input, and selection suite for javascript, with no dependencies
Live demo: https://jaredreich.com/notie
<head>
...
<link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">
<style>
/* override styles here */
.notie-container {
box-shadow: none;
}
</style>
</head>
<body>
...
<script src="https://unpkg.com/notie"></script>
</body>
npm install notie
import notie from 'notie'
// or
import { alert, force, confirm, input, select, date, setOptions, hideAlerts } from 'notie'
notie
// or
window.notie
…
…
this:notie.confirm({
text: 'Leave the page?',
submitCallback: () => this.location.href = 'https://google.com'
})
notie.confirm({
text: 'Is ES6 great?',
cancelCallback: () => notie.alert({ type: 3, text: 'Why not?' }),
submitCallback: () => notie.alert({ type: 1, text: 'I Agree' })
})
notie.force({
type: 3,
text: 'You cannot do that, sending you back.',
buttonText: 'OK',
callback: () => notie.alert({ type: 3, text: 'Maybe when you\'re older...' })
})
// Before notie is imported:
$notie-color-success: #57BF57;
$notie-color-warning: #D6A14D;
$notie-color-error: #E1715B;
$notie-color-info: #4D82D6;
$notie-color-neutral: #A0A0A0;
// See all overwriteable variables in src/notie.scss
// Then import notie:
@import '../../node_modules/notie/src/notie';
/* After notie styles are applied to DOM: */
.notie-container {
box-shadow: none;
}
…
// programmatically hide all alerts with an optional callback function
notie.hideAlerts(callbackOptional)
MIT
No open issues yet, or sync has not completed.