@asot/glitter

An image gallery component like Lightbox for Vue 2.x. (日本語のREADMEは README.jp.org にあります。)

---

Table of Contents

1. Install
   1. Npm
   2. Browser
2. Usage
   1. API
      1. images: Array<string | { src: string, caption: string }>
      2. showPageNumbers: boolean
      3. showCloseButton: boolean
      4. showLoading: boolean
      5. showLoadingProgress: boolean
      6. repeatImages: boolean
   2. Development
      1. Project setup
      2. Compiles and hot-reloads for development
      3. Compiles and minifies for production
      4. Run unit tests
      5. Lints files
   3. License

Install

Npm

npm install @asot/glitter --save

You may install Glitter component globaly:

import Glitter from '@asot/glitter';
import '@asot/glitter/dist//Glitter.css'

Vue.component('glitter', Glitter);

Or you can register Glitter in your components:

import Glitter from '@asot/glitter';
import '@asot/glitter/dist//Glitter.css'

export default {
  ...
  components: {
    Glitter,
  },
  ...
};

Browser

Include @asot/glitter in the page.

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@asot/glitter/dist/Glitter.umd.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/@asot/glitter/dist/Glitter.css">

<script>
// Global Registration
Vue.component('glitter', Glitter);

// Local Registration
new Vue({
  components: {
    glitter: Glitter
  }
})
</script>

Usage

You may now use Glitter component in your markup:

<glitter
  v-bind:images="[
    '/path/to/image',
    { src: '/path/to/image', caption: 'Hello glitter' },
  ]"
  <p>
    You can write arbitrary markup.<br />
    Here will be rendered as top.
  </p>
</glitter>

API

images: Array<string | { src: string, caption: string }>

Required, an array of image urls. You can specify a caption as well in object notation.

showPageNumbers: boolean

Display page numbers (default to true).

showCloseButton: boolean

Display a close button (default to true).

showLoading: boolean

Display loding image (default to true).

showLoadingProgress: boolean

Display loading progress (default to true).

repeatImages: boolean

Repeat images (default to false).

Development

You need Vue Cli.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run unit tests

npm run test:unit

Lints files

npm run lint

License

MIT