Vue plugin to match the height of elements
Switch branches/tags
Nothing to show
Clone or download
Latest commit 49e4538 May 25, 2018
Permalink
Failed to load latest commit information.
.github Initial commit Nov 10, 2017
config Initial commit Nov 10, 2017
dist Fixes for IE May 25, 2018
example Adds polyfills May 25, 2018
src Fixes for IE May 25, 2018
.babelrc Initial commit Nov 10, 2017
.editorconfig Initial commit Nov 10, 2017
.eslintignore Initial commit Nov 10, 2017
.eslintrc Initial commit Nov 10, 2017
.gitignore Initial commit Nov 10, 2017
.npmignore Initial commit Nov 10, 2017
CHANGELOG.md Initial commit Nov 10, 2017
LICENSE Initial commit Nov 10, 2017
README.md Additional documentation in readme Nov 10, 2017
package-lock.json 0.1.1 May 25, 2018
package.json 0.1.1 May 25, 2018

README.md

vue-match-heights

npm vue2

Quick and easy method of setting element heights to be the same. You can provide an array of selectors that will be calculated in sequence, and an array of sizes where the plugin should not run.

Demo

Using this plugin

Adding vue-match-heights to your application is as simple as any other plugin:

import Vue from 'vue';

import VueMatchHeights from 'vue-match-heights';

Vue.use(VueMatchHeights, {
  disabled: [768], // Optional: default viewports widths to disabled resizing on. Can be overridden per usage
});

new Vue({
  el: '#app',
});

The v-match-heights directive is now available to your app. This directive should be used on a wrapper element around the elements you wish to set the heights of.

<div
  class="row"
  v-match-heights="{
    el: ['h3', '.content', '.caption'],  // Array of selectors to fix
    disabled: [ // Array of heights where the plugin will not set the heights
      767, // If a string is provided this will be used as a max bound
      [920, 1200], // If an array is provided it will be used as min-max bounds in that order
    ]
  }"
>
  <div class="col-sm-6">
    <div class="thumbnail">
      <img src="http://lorempixel.com/600/400/?1">
      <div class="caption">
        <div class="title">
          <h3>...</h3>
        </div>
        <div class="content">
          ...
        </div>
      </div>
      <div class="buttons">
        ...
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="thumbnail">
      <img src="http://lorempixel.com/600/400/?2">
      <div class="caption">
        <div class="title">
          <h3>...</h3>
        </div>
        <div class="content">
          ...
        </div>
      </div>
      <div class="buttons">
        ...
      </div>
    </div>
  </div>
</div>

📜 Changelog

Details changes for each release are documented in the CHANGELOG.md.

©️ License

MIT