vue-justified-layout
v0.2.0
Published
Vue integration for Flicker's justified layout module
Downloads
110
Readme
vue-justified-layout
Vue integration for Flicker's justified layout module
Chcek out the documentation for a complete reference and usage examples.
Getting started
It's pretty easy to setup, just download the component with your favorite package manager.
npm install vue-justified-layout
Register the component globally using the plugin installation function.
import Vue from 'vue'
import VueJustifiedLayout from 'vue-justified-layout'
Vue.use(VueJustifiedLayout)
Or import it into your scripts and register it as local component.
import VueJustifiedLayout from 'vue-justified-layout'
export default {
name: 'app',
components: {VueJustifiedLayout},
data () {
return {
images: [{
width: 250,
height: 400,
url: 'https://source.unsplash.com/featured/250x400?green,blue'
}, {
width: 300,
height: 400,
url: 'https://source.unsplash.com/featured/300x400?green,blue'
}]
}
}
}
Optionally add some style for the images.
.justified-container {}
.justified-item {
img {
max-width: 100%;
}
}
Then use it to display the array of images with a nice justified layout.
<VueJustifiedLayout :items="images" v-slot="{ item }">
<img :src="item.url" />
</VueJustifiedLayout>
Or for vue < 2.6.0
versions using the old synthax.
<VueJustifiedLayout :items="images">
<template slot-scope="{ item }">
<img :src="item.url" />
</template>
</VueJustifiedLayout>
Contributing
- Create an issue reporting a bug or a feature
- Fork the project (https://github.com/codekraft-studio/vue-justified-layout/fork)
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Publish the branch (
git push origin my-new-feature
) - Create a new Pull Request
License
This project is released under the MIT License by codekraft-studio.