dreamer-vue-components

Vue library of custom awesome components

demos - take a look of the components in this live demo of the library

Installation

npm install dreamer-vue-components --save

Components

• hover-carousel - Light image carousel implemented as Vue component that change the images on mouse over, intended to be use inside a grid gallery of images to show related images in same block.
• card-grid - Masonry Style customizable grid

hover-carousel

Usage

Inside a Vue component

<template>
  <div class="container">
      <hover-carousel :images="images" :primary="images[0]">
        <h1> gallery </h1>
        <button :click="clickMe"> click me </button>
      </hover-carousel>
  </div>
</template>

<script>
  import { HoverCarousel } from 'dreamer-vue-components';

  export default {
    ...
    components: { HoverCarousel },
  };
</script>

Attributes

| attribute | type | default | description | | ------------- | ------------- | ------------- | ------------- | | images | Array | mandatory | array with String urls or Objects to the images to display | | primary | String - Object | null | array with urls to the images to display | | image-src | String | | In case of provide objects, this field indicate what attribute that contain the url | | image-key | String | | In case of provide objects, this field indicate what attribute that contain the key | | transition | String | "none" | Transition efect between images, supported transitions are none, fade, slide or slide-vertical | | orientation | String | "horizontal" | Image change will react to horizontal or vertical mouse movements, posibles values are horizontal or vertical | | resetOnExit | Boolean | false | If true, on mouse leave the component the first image will be set automatically |

Any code inserted inside the component will be positioned on top of them. Only <button> and <a> are clickeable by default, but this avoid the hover effect to happen over this elements. add pointer-events: none; css style to this components to activate the effect or pointer-events: all; over other elements to make them clickeable.

If primary is provided, then resetOnExit will come back to that image by default and, most important, the size of the block will ajust automatically to that image, otherwise the images will try to use alll the available space of the parent block (width: 100%; heigth: 100%;).

card-grid

Usage

Inside a Vue component

<template>
    <card-grid :items="cats" :cols="cols" :cols-md="cols+3"  :col-gap="colGap" :gap="gap">
        <template scope="cat">
            <img :src="cat.value">
        </template>
    </card-grid>
</template>

<script>
  import { CardGrid } from 'dreamer-vue-components';

  export default {
    ...
    components: { CardGrid },
  };
</script>

Attributes

| attribute | type | default | description | | ------------- | ------------- | ------------- | ------------- | | items | Array | mandatory | Array with objects in the grid | | cols | Number | mandatory | Number of columns, also available responsive version: cols-sm, cols-md, cols-lg and cols-xl | | gap | Number | 0 | Gap between items inside a column | | col-gap | Number | 0 | Gap between columns |

A template must be provided for the grid to use for each item, the scope must have a scope attribute. the items will be provided inside scope.value and the index inside scope.index

License

GNU GENERAL PUBLIC LICENSE Version 3