忘れないように記録しとこ

カバの樹

「vue-js-toggle-button」を使ってswitch ボタンを実装する

2019年7月22日

完全版を表示する

vue-js-toggle-buttonとは

 

「vue-js-toggle-button」は、switchボタンを実装するライブラリです。

シンプルなAPIで容易に実装ができます。
スイッチの大きさや色などのカスタマイズを行うこともできます。

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install vue-js-toggle-button --save

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-js-toggle-button@1.3.2/dist/index.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/euvl/vue-js-toggle-button

 

導入手順

シンプルなswitchボタンを実装します。

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)

（2）WEBページの場合

Vue.use(window['vue-js-toggle-button'].default)

2.Switchボタンのメソッドを設定

new Vue({
   el: '#app',
   data: {
    myDataVariable: ''
   },
   methods: {
    onChangeEventHandler: function(){
      console.log('onChangeEventHandler');
    }
   }
})

3. <toggle-button>テンプレートを準備

<div id="app">
  <toggle-button @change="onChangeEventHandler"></toggle-button>
  <toggle-button v-model="myDataVariable"></toggle-button>  
  <toggle-button :value="false"
                 color="#82C7EB"
                 height="40"
                 width="84"
                 :sync="true"
                 :labels="true"></toggle-button>
  <toggle-button :value="true"
                 :labels="{checked: 'Foo', unchecked: 'Bar'}"></toggle-button>
</div>

 

サンプル

>>専用ページで確認する

 

プロパティ

「vue-js-toggle-button」のプロパティ一覧は以下になります。

名 Type Default 説明
value Boolean false トグルボタンの初期状態
sync Boolean false trueに設定すると、valueプロパティの変更を監視し、value propが変更されるたびにボタンの現在の状態を上書きします
speed Number 300 アニメーションの遷移時間
disabled Boolean false ボタンはマウスイベントに反応しません
color [String, Object] #75C791 String の場合 - チェックされたときのボタンの色
Object の場合 - オン/オフ、または無効の場合のボタンの色
例: {checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}
css-colors Boolean false trueの場合 - CSSスタイルの使用を優先して、インラインスタイルによる色の設定を無効にします。
labels [Boolean, Object] false Booleanの場合 - デフォルトのラベルを表示/非表示にします（ "on"と "off"）。
Object の場合 - 両方の状態にカスタムラベルを設定します。
例: {checked: 'Foo', unchecked: 'Bar'}
switch-color [String, Object] #BFCBD9 String の場合 - チェックしたときのスイッチの色または背景のプロパティ
Object の場合 - オン/オフのときのスイッチの色または背景プロパティ
例: {checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}
width Number 50 ボタンの幅
height Number 22 ボタンの高さ
margin Number 3 スイッチと背景の境界線の間のスペース
name String undefined 生成された入力フィールドに付ける名前
font-size Number undefined フォントサイズ

まとめ

switchボタンを実装するライブラリでした。

単にチェックボックにチェックするよりも、直感的に使える場面が多いので、良く利用しています。
UI全部入りのライブラリよりも軽いので、必要な場面によってはすごく便利だと思います。

今日はこの辺でー

 

  • B!