viw
vue-image-wall
npm i vue-image-wall
viw

vue-image-wall

An interactive vue component that displays multiple images in a row

by Zijie Wu

1.1.0 (see all)License:MITTypeScript:Not Found
npm i vue-image-wall
Readme

vue image wall

Build Status

An interactive vue component that displays multiple images in a row.

By hovering mouse over one of the images, that image will expand in width.

Demo | Demo Project

Install

npm install vue-template-compiler --save-dev
npm install vue-image-wall

or

yarn add vue-template-compiler -D
yarn add vue-image-wall

Usage

FEATURES UNDER DEVELOPMENT

  1. Height is fixed to 250px, will be fixed
  2. Will add ability to accept config (scale of image, animation duration, etc)
<template>
  <div id="app">
    <vue-image-wall :link-images="images"></vue-image-wall>
  </div>
</template>

<script>
  import VueImageWall from 'vue-image-wall';

  export default {
    name: 'app',
    components: { VueImageWall },
    data: function () {
      return {
        images: [
          '/assets/0.jpg',
          '/assets/1.jpg',
          '/assets/2.jpg',
          '/assets/3.jpg',
          '/assets/4.jpg'
        ],
      };
    },
  };
</script>

<style scoped>
</style>
propstypedefault valuenote
link-images[String](required)Contains list of images that this component will display

How to Contribute

Any comment/issue/PR is welcome!

TODO:

  1. Add two interaction modes
    1. macOS dock

License

MIT

Downloads/wk

10

GitHub Stars

19

LAST COMMIT

9mos ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

4

OPEN PRs

7
VersionTagPublished
1.1.0
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial