Vue.js lingalleryを利用してシンプルなギャラリーを実装する
vue.jsのライブラリである 「lingallery」をインストールすると、シンプルなギャラリーを簡単に作成することができます。ここでは、 lingalleryを利用するための手順と簡単な使い方を記述してます。
環境
- OS CentOS 8.0.1905 (Core)
- node v12.13.1
- npm 6.13.2
- @vue/cli 4.1.1
Vue環境構築
下記のコマンドで構築。今回は、vueappという名前でプロジェクトを作成してます。
vue create vueapp
プロジェクト作成時は、defaultを選択してます 。
Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)
lingalleryインストール
下記の手順でインストールします。
## 移動
cd vueapp
## インストール
npm i -S lingallery
lingallery 使い方
src配下のApp.vueを下記のように編集します。
<template>
<div class="container">
<logo />
<lingallery :iid.sync="currentId" :width="width" :height="height" :items="items"/>
</div>
</template>
<script>
export default {
components: {
Lingallery
},
data() {
return {
width: 800,
height: 600,
items: [{
src: 'https://cdn.pixabay.com/photo/2020/02/04/10/42/camping-4817872_960_720.jpg',
thumbnail: 'https://cdn.pixabay.com/photo/2020/02/04/10/42/camping-4817872_960_720.jpg',
caption: 'キャプション名1',
id: 'someid1'
},
{
src: 'https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg',
thumbnail: 'https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg',
caption: 'キャプション名2',
},
]
,currentId: null,
};
},
};
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
起動します。
npm run serve
ブラウザから http://プライベートIP:8080 に アクセスすると、 ギャラリー が作成されていることが確認できます。
-
前の記事
Webmin 設定したパスワードを忘れた場合の対処法 2020.03.25
-
次の記事
React.js ライブラリ「react-icons」を使用して様々なアイコンを利用する 2020.03.25
コメントを書く