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 gallery with lightbox
<template>
<mdb-filter
:data="lightbox"
:col="3"
primary-color="#7e57c2"
/>
<script>
import mdbFilter from 'mdbfilter';
export default {
name: 'app',
components: {
mdbFilter,
},
data() {
return {
lightbox: [
{ category: 'mountains', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).jpg", lightbox:"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(30).jpg"},
{ category: 'mountains', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(28).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(28).jpg"},
{ category: 'concert', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(13).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(13).jpg"},
{ category: 'concert', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(14).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(14).jpg"},
{ category: 'concert', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(15).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(15).jpg"},
{ category: 'office', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(54).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(54).jpg"},
{ category: 'office', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(55).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(55).jpg"},
{ category: 'mountains', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(23).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(23).jpg"},
{ category: 'mountains', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(29).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(29).jpg"},
{ category: 'office', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(50).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(50).jpg"},
{ category: 'mountains', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(27).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(27).jpg"},
{ category: 'office', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(52).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(52).jpg"},
{ category: 'concert', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(12).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(12).jpg" },
{ category: 'office', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(53).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(53).jpg"},
{ category: 'office', src: "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(56).jpg", lightbox: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(56).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"> |