Awesome
Dialog
Dialog component with structural styling to give you a clean slate.
Live demo is here
Installation
$ npm install dialog-component
Features
- events for composition
- structural CSS letting you decide on style
- overlay support
- modal overlay support
- escapable (esc key support)
- fluent API
Events
show
the dialog is shownhide
the dialog is hiddenescape
the dialog was closed via the escape keyclose
the dialog was closed via the close button
API
dialog(msg)
Display a dialog with a msg
only.
dialog(title, msg)
Display a dialog with title
and msg
.
Dialog#closable()
Make the dialog closable, this adds a × that users make click to forcefully close the dialog.
Dialog#effect(name)
Assign the effect name, driven by CSS transitions. Out of the box the following are available:
slide
fade
scale
Dialog#overlay()
Add a clickable overlay, which closes the dialog.
Dialog#modal()
Add a non-clickable overlay making it modal.
Dialog#fixed()
Dialogs are centered by default. If you'd rather use CSS to position the dialog make it fixed
;
no per element CSS properties are added to such dialogs.
Dialog#escapable()
This is private as it is implied by other options. If no overlay is used, or the overlay is non-modal then a user may close the dialog by pressing the escape key.
Dialog#show()
Show the dialog.
Dialog#hide([ms])
Hide the dialog immediately or wait ms
.
Dialog#addClass(name)
Add class name
, useful for styling dialogs differently.
License
MIT
Developers
Install component-test globally in order to run unit tests:
sudo npm install -g component-test2