目次
VueStarとは
VueStarは、FontAwesomeや画像などをTwitterのいいねボタンのようなアニメーション付きボタンにするコンポーネントライブラリです。
animate.cssでアニメーションを設定することも可能なようです。
【動画サイズ:29KB】
環境
この記事は、以下の管理人の検証環境にて記事にしています。
ライブラリの取得
ライブラリを取得するには、npm, CDNのどれか一つを使用します。
npm
npm install vue-star
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/VueStar.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
gitリポジトリは以下から取得できます。
導入手順
管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、Twitterのいいねボタンのようなアニメーション付きボタンを実装します。
step
1ライブラリの呼び出し
まずライブラリを呼び出す為に、以下の2通りのケースで呼び出します。
ES6等で実装する場合
import VueStar from 'vue-star'
UMDで実装する場合
const VueStar = window['VueStar'];
step
2メソッドを設定
Vue.component
に上記にで取得した VueStar を設定します。
Vue.component('VueStar', VueStar); new Vue({ el: '#app', mounted: function(){ this.$refs.ThumbsUp.$data.active = true; console.log(this.$refs.ThumbsUp.$data); }, methods: { handleClick () { console.log(this.$refs.ThumbsUp.$data); //do something } } });
step
3テンプレートを準備
<vue-star>
コンポーネントを設置します。
サンプルはケバブケースで記載しています。
<div id="app"> <vue-star animate="animated rubberBand" color="#F05654"> <a slot="icon" class="fa fa-heart" @click="handleClick"></a> </vue-star> <vue-star ref="ThumbsUp" animate="animated shake" color="#5654F0"> <a slot="icon" class="fa fa-thumbs-up" @click="handleClick"></a> </vue-star> </div>
サンプル
今回のソースを実際に触って確認できるようにデモを用意しました。
See the Pen Vue.jsでTwitterのいいねボタンのようなアニメーション付きボタンを実装する「VueStar」 by カバの樹 (@kabanoki) on CodePen.dark
さいごに
FontAwesomeや画像などをTwitterのいいねボタンのようなアニメーション付きボタンにするコンポーネントライブラリでした。
今日はこの辺でー