Vue Filter

Vue Filter Plugin - Bootstrap 4 & Material Design.

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).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).jpg" },
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).jpg"},
                  { category: 'landscape', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).jpg"},
                  { category: 'landscape', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).jpg"},
                  { category: 'landscape', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).jpg"},
                  { category: 'landscape', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).jpg"},
                ],
              }
            }
          }
        </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).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).jpg" },
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).jpg"},
                  { category: 'landscape', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).jpg"},
                  { category: 'landscape', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).jpg"},
                  { category: 'landscape', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).jpg"},
                  { category: 'architecture', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).jpg"},
                  { category: 'landscape', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).jpg"}
                ],
              }
            }
          }
        </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).jpg"},
                  { category: 'buildings', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).jpg" },
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg"},
                  { category: 'nature', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).jpg"},
                  { category: 'buildings', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).jpg"},
                  { category: 'models', src: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(65).jpg"},
                  { category: 'models', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(63).jpg"},
                  { category: 'nature', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(41).jpg"},
                  { category: 'buildings', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).jpg"},
                  { category: 'nature', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).jpg"},
                  { category: 'models', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(64).jpg"},
                  { category: 'buildings', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).jpg"},
                  { category: 'food', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).jpg"},
                  { category: 'nature', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).jpg"}
                ],
              }         
            }
          }
        </script>
      

Filter - getting started : download & setup


Download

This plugin requires a purchase.

Buy Filter plugin - $9

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">