← Back

molecule-isotope-gallery

a webcomponent to display a filterable gallery using isotope.js

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/dloeda/molecule-isotope-gallery on 2019-05-22 ]

<molecule-isotope-gallery>

Name: molecule-isotope-gallery
Availability: InStock
Rating: 4 (106 reviews)
Author: dloeda

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

MIT License

Compatibility

(Loading compatibility data...)

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.js

**[ This description is mirrored from README.md at [github.com/dloeda/molecule-isotope-gallery](https://github.com//dloeda/molecule-isotope-gallery/blob/0.1.1/README.md) on 2019-05-22 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/dloeda/molecule-isotope-gallery) # \ > is a webcomponent for displaying a filterable gallery using isotope.js to animage filter transitions > > Polymer 2.0 ready ## Usage example ```html

``` ## Install Install the component using [Bower](http://bower.io/): ```sh $ bower install https://github.com/dloeda/molecule-isotope-gallery.git --save ``` Or [download as ZIP](https://github.com/dloeda/molecule-isotope-gallery/archive/master.zip). ## Usage 1. Import Web Components' polyfill (if needed): ```html ``` 2. Import Custom Element: ```html ``` 3. Start using it! ```html

``` ## Contributing 1. Fork it! 2. Create your feature branch: `git checkout -b my-new-feature` 3. Commit your changes: `git commit -m '� feat(*): Add some feature'` 4. Push to the branch: `git push origin my-new-feature` 5. Submit a pull request! ## License [MIT License](http://opensource.org/licenses/MIT)

View on GitHub
GitHub 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

Directory