vue-fit
v0.1.0
Published
fit.js wrapper for Vue 2.0
Downloads
102
Readme
vue-fit
fit.js wrapper for Vue 2.0
This is a directive wrapper for fit.js
Install
CommonJS
Available through npm as
vue-fit
.var VueFit = require('vue-fit') Vue.use(VueFit)
Direct include
- You can also directly include it with a
<script>
tag when you have Vue and fit.js already included globally. It will automatically install itself, and will add a globalVueFit
.
Usage
Using the v-fit
directive
You might want to fit bar
into foo
whilst maintaining it's original aspect ratio
<div id="foo">
<div v-fit id="bar"></div>
</div>
Configuring Options
You can set options such as defined for fit.js module.
If you are using the DOM, you can tell fit to run again whenever the window resizes.
<div id="foo">
<div v-fit="{watch: true}" id="bar"></div>
</div>
You can control how it fits, like this
<div id="foo">
<div v-fit="{cover: true}" id="bar"></div>
</div>
Or both
<div id="foo">
<div v-fit="{watch: true, cover: true}" id="bar"></div>
</div>
For alignement, you should use 'center', 'left', right', 'top', 'bottom' values
<div id="foo">
<div v-fit="{hAlign: 'left', vAlign: 'bottom'}" id="bar"></div>
</div>