# Usage

The component is simple to use, it needs a list of elements to work and a little bit of additional style. The list can be a series of numbers which represent the aspect ratio of the boxes or a list of objects with mandatory width and height properties.

# Basic use

The first example show the very basic use, with an array of aspect ratios.

<VueJustifiedLayout :items="[0.3, 0.6, 0.4, 0.6]" />

.justified-container
  background-color: whitesmoke;
  width: 100%;

.justified-item
  &:nth-child(odd)
    background-color: #26a69a;
  &:nth-child(even)
    background-color: #81c784;

# Custom template

You can customize the content of the rendered boxes. For example if you want to display a list of images and have some custom logic in it.

In this case the component provide a named slot called inner to add custom templates to the boxes and expose the current item as slot scope.

<vue-justified-layout :items="images" v-slot="{item, style, index}">
  <img :src="item.url" />
</vue-justified-layout>

Than create a list of images with mandatory sizes and any additional property such as url as in the example, you will be able to access it inside the slot scope.

export default {
  data () {
    return {
      images: [{
        width: 250,
        height: 400,
        url: 'https://source.unsplash.com/featured/250x400?green,blue'
      }, {
        width: 600,
        height: 400,
        url: 'https://source.unsplash.com/featured/600x400?green,blue'
      }]
    }
  }
}