filtrr v1.0.1
filtrr
Filtrr helps you to show and hide the elements of your web site, it's customizable and easy to use.
Browser Support
 |  |  |  |  |  |
|---|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | No |
Usage
JavaScript
You can use filtrr in two ways, in the case of using a framework like React JS or Angular you should import the file:
npm install filtrrimport { filtrr } from 'filtrr';Or in case of Vanilla JS you should add the script tag:
<head>
<!-- it sets the constant filtrr -->
<script src="filtrrBrowser.min.js"></script>
</head>And for both cases, you need to call to filtrr and you can customize it or just use it: * Note: to use transitions is required to import animate.css
// OPTIONAL
filtrr.load({
// active or deactivate the transitions
useTransitions: true,
// transitions in effect
transitionIn: 'fadeInUp',
// transitions out effect
transitionOut: 'fadeOutDown',
// duration of the transitions in ms.
duration: 800
});
// REQUIRED
filtrr.fire();HTML
All the controls that manage what elements to show, must be inside of element with 'controls' class. To identify the filters is necessary that they have the 'filtrr-btn' class. * Note: '-' in the 'data-filter' attribute is the ONLY way to make that filtrr shows everything.
<div class="controls">
<button class="filtrr-btn button" data-filtrr="-">All</button>
<button class="filtrr-btn button" data-filtrr="animal">Animal</button>
<button class="filtrr-btn button" data-filtrr="people">People</button>
<button class="filtrr-btn button" data-filtrr="art">Art</button>
</div>To relate the filters to the elements, the elements to filter must have the class 'filtrr-elem' and their 'data-elem' must be equal to the 'data-filtrr' of the control.
<img class="filtrr-elem" data-elem="animal" src="image.jpg" alt="cat">
<img class="filtrr-elem" data-elem="animal" src="image.jpg" alt="fox">
<img class="filtrr-elem" data-elem="people" src="image.jpg" alt="friends">License
Licensed under MIT license.