Home

Awesome

Vue.Isotope

GitHub open issues GitHub closed issues Npm download Npm version Package Quality vue2 MIT License

Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing isotope layout including filtering and sorting.

Motivation

Integrate Vue with isotope filter & sort magical layouts.

Demo

demo gif

Basic<br> Complete<br>

Isotope elements:

demo gif

fiddle<br>

Features

Usage

For Vue.js 2.0

Use isotope component:

<isotope :options='getOptions()' :list="list" @filter="filterOption=arguments[0]" @sort="sortOption=arguments[0]">
  <div v-for="element in list" :key="element.id">
    {{element.name}}
  </div>
</isotope>

Important: elements inside the v-for loop should have a key prop set.

Props

itemSelector

Type: String<br> Required: false<br> Default: "item"<br>

Class to be applied to the isotope elements. Similar as isotope itemSelector but without the starting "." This class will be applied automatically by the isotope component on the children elements.

list

Type: Array<br> Required: true<br>

Array to be synchronized with drag-and-drop. Typically same array as referenced by inner element v-for directive.<br>

options

Type: Object<br> Required: true

  getFilterData:{
    isEven: function(itemElem){
      return itemElem.id % 2 === 0;
    },
    isOdd: function(itemElem){
      return itemElem.id % 2 !== 0;
    },
    filterByText: function(itemElem){
      return itemElem.name.toLowerCase().includes(this.filterText.toLowerCase());
    }
  }
  getSortData: {
    id: "id",
    name: function(itemElem){
      return itemElem.name.toLowerCase();     
    }
  }

Events

filter, sort, layout<br> Send when filter, sort and layout respectively are called on the isotope element with the corresponding String parameter.

shuffle<br> Send when shuffle is called on the isotope element.

arrange<br> Send when arrange is called on the isotope element with the corresponding Object parameter.

Methods

sort (name)<br> Sort the isotope component with the corresponding String parameter.

filter (name)<br> Sort the isotope component with the corresponding String parameter.

layout (option)<br> Change the layout of the isotope component using the option as layout name if option is String or with option object if option is Object.

arrange (option)<br> Call arrange on the isotope component with the corresponding Object parameter.

unfilter ()<br> Reset filter on the isotope component.

shuffle ()<br> Shuffle the isotope component.

Working with images

Unloaded images can throw off Isotope layouts and cause item elements to overlap. Use vue.imagesLoaded to solve this problem.

Gotchas

For Vue.js 1.0

See here

Installation

 npm install vueisotope
 Bower install vueisotope

License

MIT