目次
vuesocialとは
vuesocialは、Vue.jsを使ってソーシャルボタンを設置するコンポーネントライブラリです。
【動画サイズ:41KB】
環境
Vue | 2.6.10 |
vuesocial | 0.1.2 |
インストール
以下のnpm、yarn、CDNを使ってインストールします。
npm
npm install @growthbunker/vuesocial
yarn
yarn add @growthbunker/vuesocial
CDN
<script src="https://cdn.jsdelivr.net/npm/@growthbunker/[email protected]/dist/vuesocial.min.js"></script>
gitリポジトリは以下から取得できます。
https://github.com/growthbunker/vuesocial
導入手順
1. ライブラリの取り込み
(1)ES6等の場合 [注意]モジュール版は未検証です。
import vuesocial from "@growthbunker/vuesocial"
(2)UMDの場合
なし
2.メソッドを設定
iconPathにアイコンの設置ディレクトを記載する。
今回はサンプルで、Githubの画像を直接参照してしまう。
本来は、Gitディポジトリのasset内に格納してあるSVGファイルを使用する。
https://github.com/growthbunker/vuesocial/tree/master/assets/networks
new Vue({ el: '#app', data: { iconPath:'https://raw.githubusercontent.com/growthbunker/vuesocial/09bfd3fa5befaf32a8bf341428929cc04b5ec581/assets/networks/' } });
3. テンプレートを準備
<gb-social-button>
を設置する。
networkに使用したいソーシャルを設定する。
UMDを使用する場合は、icon-pathを使用して、アイコンの設置ディレクトを明示する必要がある。
[注意] サンプルはケバブケースで記載しています。
<div id="app"> <gb-social-button :icon-path="iconPath" network="wordpress" size="small" theme="light" > WordPress </gb-social-button> <gb-social-button :icon-path="iconPath" network="facebook" size="small" theme="light" > FaceBook </gb-social-button> <gb-social-button :icon-path="iconPath" network="twitter" size="small" theme="light" > Twitter </gb-social-button> </div>
サンプル
さいごに
Vue.jsを使ってソーシャルボタンを設置するコンポーネントライブラリでした。
今日はこの辺でー