molecule-isotope-gallery:
[ 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!