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