molecule-isotope-gallery
a webcomponent to display a filterable gallery using isotope.js
[ This description is mirrored from README.md at github.com/dloeda/molecule-isotope-gallery on 2019-05-22 ]
<molecule-isotope-gallery>
is a webcomponent for displaying a filterable gallery using isotope.js to animage filter transitions
Polymer 2.0 ready
Usage example
<molecule-isotope-gallery default-filter="mountain">
<div slot="tags">
<button data-filter="item">All</button>
<button data-filter="sports">Sports</button>
<button data-filter="mountain">Mountain</button>
<button data-filter="foo">None</button>
</div>
<img src="demo/images/mountain1.jpg" width="200" height="150" class="item mountain"/>
<img src="demo/images/sports2.jpg" width="200" height="150" class="item sports"/>
<img src="demo/images/mountain3.jpg" width="200" height="150" class="item mountain"/>
</molecule-isotope-gallery>
Install
Install the component using Bower:
$ bower install https://github.com/dloeda/molecule-isotope-gallery.git --save
Or download as ZIP.
Usage
Import Web Components' polyfill (if needed):
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
Import Custom Element:
<link rel="import" href="bower_components/molecule-isotope-gallery.html">
Start using it!
<molecule-isotope-gallery> <div slot="tags"> <button data-filter="sports">Sports</button> <button data-filter="mountain">Mountain</button> </div> <img src="demo/images/mountain1.jpg" class="item mountain"/> <img src="demo/images/sports2.jpg" class="item sports"/> <img src="demo/images/mountain3.jpg" class="item mountain"/> </molecule-isotope-gallery>
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m '� feat(*): Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request!
License
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
Polymer/polymer#^2.0.0-rc.2
- Released
- 2017-04-04
- Maturity
- TESTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent
molecule-isotope-gallery - Vaadin Add-on Directory
a webcomponent to display a filterable gallery using isotope.jsGitHub Homepage
Issue tracker
License
Online Demo
Documentation
molecule-isotope-gallery version 0.1.0
### Dependencies
Polymer/polymer#^2.0.0-rc.2
molecule-isotope-gallery version 0.1.1
### Dependencies
Polymer/polymer#^2.0.0-rc.2