Glitter

#+TITLE: @asot/glitter

Vue 2.x向けのLightboxライクな画像ギャラリーコンポーネント

Examples available at https://office-asot.github.io/Glitter/.

[[./images/example.gif]]

• インストール

** Npm

#+begin_src shell npm install @asot/glitter --save #+end_src

グローバルに登録する場合:

#+begin_src javascript import Glitter from '@asot/glitter'; import '@asot/glitter/dist//Glitter.css';

Vue.component('glitter', Glitter); #+end_src

又はローカルに登録する場合:

#+begin_src javascript import Glitter from '@asot/glitter'; import '@asot/glitter/dist//Glitter.css';

export default { ... components: { Glitter, }, ... }; #+end_src

** ブラウザ

@asot/glitterをページにインクルードしてください。

#+begin_src html

#+end_src

• 使い方

マークアップ内でコンポーネントを指定します:

#+begin_src html <glitter v-bind:images="[ '/path/to/image', { src: '/path/to/image', caption: 'Hello glitter' }, ]"

** API

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

必須、画像のURLの文字列、もしくは =src= と =caption= を持ったオブジェクトの配列

*** showPageNumbers: boolean

デフォルトは =true= 、ページ番号を表示する

*** showCloseButton: boolean

デフォルトは =true= 、閉じるボタンを表示する

*** showLoading: boolean

デフォルトは =true= 、ロード中画像を表示する

*** showLoadingProgress: boolean

デフォルトは =true= 、ロード中画像と共に進捗を表示する

*** repeatImages: boolean

デフォルトは =false= 、画像をリピートして表示する

• 開発

[[https://cli.vuejs.org/][Vue Cli]] が必要です。

** 前準備

#+begin_src shell npm install #+end_src

** 開発用サーバの起動

#+begin_src shell npm run serve #+end_src

** ビルド

#+begin_src shell npm run build #+end_src

** テスト

#+begin_src shell npm run test:unit #+end_src

** License

[[./LICENSE][MIT]]