0.1.15 • Published 4 years ago
@asot/glitter v0.1.15
An image gallery component like Lightbox for Vue 2.x. (日本語のREADMEは README.jp.org にあります。)
Table of Contents
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