Vue Filter

Vue Filter Plugin - Bootstrap 4 & Material Design.

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Bootstrap Filter plugin is an extension perfect for introducing vistors to a number of images, which can be freely filtered depending on the category. Easy to use, setup and customize.

Basic example 

<template>
  <mdb-filter :data="filter" :col="4" />
<script>
  import mdbFilter from 'mdbfilter';

  export default {
    name: 'app',
    components: {
      mdbFilter,
    },
    data() {
      return {
        filter: [{
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp"
          },
          {
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp"
          },
          {
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).webp"
          },
          {
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).webp"
          },
          {
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).webp"
          },
        ],
      }
    }
  }
</script>

Draggable gallery

Add property drag to enable dragging elements.

<template>
  <mdb-filter :data="gallery" drag primary-color="#4B515D" secondary-color="#eceff1" />
<script>
  import mdbFilter from 'mdbfilter';

  export default {
    name: 'app',
    components: {
      mdbFilter,
    },
    data() {
      return {
        gallery: [{
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp"
          },
          {
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp"
          },
          {
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).webp"
          },
          {
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp"
          },
          {
            category: 'architecture',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).webp"
          },
          {
            category: 'landscape',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).webp"
          }
        ],
      }
    }
  }
</script>

Draggable gallery with masonry layout 

<template>
  <mdb-filter :data="masonry" drag :col="5" primary-color="#880e4f" />
<script>
  import mdbFilter from 'mdbfilter';

  export default {
    name: 'app',
    components: {
      mdbFilter,
    },
    data() {
      return {
        masonry: [{
            category: 'models',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(60).webp"
          },
          {
            category: 'buildings',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp"
          },
          {
            category: 'nature',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp"
          },
          {
            category: 'buildings',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp"
          },
          {
            category: 'models',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(65).webp"
          },
          {
            category: 'models',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(63).webp"
          },
          {
            category: 'nature',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(41).webp"
          },
          {
            category: 'buildings',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp"
          },
          {
            category: 'nature',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp"
          },
          {
            category: 'models',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(64).webp"
          },
          {
            category: 'buildings',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp"
          },
          {
            category: 'food',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp"
          },
          {
            category: 'nature',
            src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp"
          }
        ],
      }
    }
  }
</script>

Filter - getting started : download & setup

Download

This plugin requires a purchase.

Buy Filter plugin

Props

Name Type Default Description Example
data Array Array of objects which provides category and source for gallery images. A source link to full resolution is optional. <mdb-filter :data="data">
drag Boolean Enables dragging elements. <mdb-filter :data="data" drag>
primary-color String #4285F4 Determines color of an active button's background. <mdb-filter :data="data" primary-color="black">
secondary-color String white Determines color of buttons' background. <mdb-filter :data="data" secondary-color="blue">
masonry Boolean false Allows to create layout from images with mixed height values <mdb-filterY>
col Number 4 Sets number of columns for a desktop view.. <mdb-filter :data="data" :col="3">