https://github.com/component/dialog
Dialog component
https://github.com/component/dialog
Last synced: 8 months ago
JSON representation
Dialog component
- Host: GitHub
- URL: https://github.com/component/dialog
- Owner: component
- Created: 2012-05-04T20:01:33.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2015-06-04T11:18:51.000Z (almost 11 years ago)
- Last Synced: 2024-12-03T13:43:43.488Z (over 1 year ago)
- Language: JavaScript
- Size: 503 KB
- Stars: 52
- Watchers: 8
- Forks: 30
- Open Issues: 5
-
Metadata Files:
- Readme: Readme.md
- Changelog: History.md
Awesome Lists containing this project
README
# Dialog
Dialog component with structural styling to give you a clean slate.
Live demo is [here](http://component.github.io/dialog/)
## 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 shown
- `hide` the dialog is hidden
- `escape` the dialog was closed via the escape key
- `close` 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](https://github.com/MatthewMueller/component-test)
globally in order to run unit tests:
```bash
sudo npm install -g component-test2
```