vue-equalizer
Version:
Vue Equalizer is a Vue.js component to help solve a common frontend development problem, where independent items and nested content need to be equal height.
77 lines (50 loc) • 2.01 kB
Markdown
# Vue Equalizer
Vue Equalizer is a Vue.js component to help solve a common frontend development problem, where independent items and nested content need to be equal height.
Until the Level 2 CSS Grid specification which allows for subgrids is available and widely supported, JavaScript will be required to achieve this effect.
## The Problem
A common design frontend developers are given looks something like this. A row of blocks all with nicely aligned content.
In reality, once real and dynamic content is added the blocks end up looking like this:
Vue Equalizer fixes this.
## How to use
### Installation
```
npm install --save vue-equalizer
```
Then, in your javascript file:
```js
import Vue from "vue";
import equalizer from "vue-equalizer";
new Vue({
el: "#app",
components: { equalizer }
});
```
Alternatively add the CDN script tag directly to your page.
```html
<script src="https://unpkg.com/vue-equalizer@1.0.7/dist/equalizer.min.js"></script>
```
In your HTML:
```html
<div id="app">
<equalizer
:classes="['card','card-title', 'card-desc']"
:config="{
1024: 4,
680: 3,
0: 1
}"
>
<!-- HTML -->
</equalizer>
</div>
```
### Classes
The equalizer component accepts an array of classes. Each element of that class will be made the same height.
The `classes` prop is **required**.
### Config
The equalizer component accepts a config object of key value pairs. The key must be an integer which is a *min-width* breakpoint. The value is the number of elements per row at that breakpoint.
The `config` prop is **optional**. If no config object is passed as props then by default the equalizer will make all items the same height regardless of screen width and number per row.
## Demo
