目次
vue-rocker-switchとは
vue-rocker-switchは、電気のスイッチのような見た目のスイッチボタンを実装できるコンポーネントライブラリです。
【動画サイズ:58KB】
環境
この記事は、以下の管理人の検証環境にて記事にしています。
vue.js | 2.6.10 |
vue-rocker-switch | 1.2.4 |
ライブラリの取得
ライブラリを取得するには、npm, CDNのどれか一つを使用します。
npm
npm install vue-rocker-switch --save
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-rocker-switch.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-rocker-switch.css">
gitリポジトリは以下から取得できます。
導入手順
管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、電気のスイッチのような見た目のスイッチボタンを実装します。
step
1ライブラリの呼び出し
まずライブラリを呼び出す為に、以下の2通りのケースで呼び出します。
ES6等で実装する場合
import RockerSwitch from "vue-rocker-switch"; import "vue-rocker-switch/dist/vue-rocker-switch.css";
UMDで実装する場合
const RockerSwitch = window['vue-rocker-switch']
step
2メソッドを設定
上記で取得した RockerSwitchを componentsに取り込みます。
new Vue({ el: '#app', components: { 'rocker-switch':RockerSwitch }, data() { return { currentValue: true } } });
step
3テンプレートを準備
<rocker-switch>
を配置します。
valueにboolを設定して、ON・OFFの初期設定を行います。
sizeにfloat値をを設定することで、コンポーネントのサイズを変更することができます。
サンプルはケバブケースで記載しています。
<div id="app"> <rocker-switch :size="0.9" :value="currentValue"></rocker-switch> </div>
サンプル
今回のソースを実際に触って確認できるようにデモを用意しました。
See the Pen Vue.jsで電気のスイッチのようなコンポーネントを実装する「vue-rocker-switch」 by カバの樹 (@kabanoki) on CodePen.dark
さいごに
電気のスイッチのような見た目のスイッチボタンを実装できるライブラリでした。
今日はこの辺でー