alert-box-web-components
v0.2.0
Published
Alert Box Web Components
Downloads
11
Maintainers
Readme
Alert Box
Web Component for an "Alert Box" element. (Requires: HTML Imports, HTML Templates, Custom Elements, and Shadow DOM)
Import
<link rel="import" href="http://pixelhandler.github.io/alert-box-web-components/index.html">
Well don't really use that URL, but that is a copy of the dist file, instead install...
Install
npm install alert-box-web-components
Demo
Development
The example directory shows a few alerts and one using Object.observe for data bindings.
bower install
npm install
npm run start
launches broccoli (development) servernpm run open
opens location http://localhost:4200/example/
Click X
icons to dismiss alert box, click buttons to render more.
The alert box on the lower right is an example of an alert box with a countdown. Hours and seconds tick down, then closes and a new alert follows.
Build
Brocfile.js (broccoli) is the build recipe, npm run build
will create
dist/index.html and dist/example/ only the index.html file is released with
bower and npm packages. To watch and build use npm run start
then open
links under the heading below. Use ctrl-C to stop.
Reference
W3.org Specs
Tutorials / Links
- WebComponents.org
- Custom Elements - A Web Components Gallery for Modern Web Apps
- Custom Elements: defining new elements in HTML - HTML5 Rocks
- Introduction to Shadow DOM — WebComponents.org
- Shadow DOM 101 - HTML5 Rocks
- Shadow DOM 201: CSS and Styling - HTML5 Rocks
- Shadow DOM 301: Advanced Concepts & DOM APIs - HTML5 Rocks
- getter - JavaScript | MDN
- YOU MIGHT NOT NEED JQUERY