Bootstrap, Vue, Toggle Status Switch

bootstrap-vue-toggle-status-switch.markdown

Bootstrap, Vue, Toggle Status Switch

Just a fast test of a status toggle button using, bootstrap, vue.js, and fontawesome.

A Pen by Christophor Wilson on CodePen.

License.

index.html

<div class="heading">
  <h1>A Simple Vue.js Toggle Switch</h1>
  <h4>Use Vue.js to quickly and easily create toggle switch.</h4>
</div>

<div class="container" id="app">
  
  <div align="center" style="padding-bottom:30px;">
    <vue-toggle :toggled.sync="toggled_1" label="Enabled"></vue-toggle> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <vue-toggle :toggled.sync="toggled_2" label="Disabled"></vue-toggle>
  </div>
  <h3>Code Overview</h3>
  <div class="row">
    <div class="col-sm-8">
      <p>If you need a simple way to create toggle switches within Vue, give this a try, lets say you need it enabled, or active by default you could do something like this.</p>
      <code>
        &lt;vue-toggle :toggled.sync=&quot;<b>toggled_1</b>&quot; label=&quot;<b>Enabled</b>&quot;&gt;&lt;/vue-toggle&gt;
      </code>
    </div>
    <div class="col-sm-3 col-sm-offset-1">
      <vue-toggle :toggled.sync="toggled_1" label="Enabled"></vue-toggle>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-sm-8">
      <p>Here is a basic example of the toggle switch in it's disabled state.</p>
      <code>
        &lt;vue-toggle :toggled.sync=&quot;<b>toggled_2</b>&quot; label=&quot;<b>Disabled</b>&quot;&gt;&lt;/vue-toggle&gt;
      </code>
    </div>
    <div class="col-sm-3 col-sm-offset-1">
      <vue-toggle :toggled.sync="toggled_2" label="Disabled"></vue-toggle>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-sm-8">
      <p>If you don't need to use the label's in your project you don't need to use the label property.</p>
      <code>
        &lt;vue-toggle :toggled.sync=&quot;<b>toggled_3</b>&quot;&gt;&lt;/vue-toggle&gt;
      </code>
    </div>
    <div class="col-sm-3 col-sm-offset-1">
      <vue-toggle :toggled.sync="toggled_3"></vue-toggle>
    </div>
  </div>
  
</div>







<!-- Toggle Template -->
<!-- This is the Vue Toggle component's html -->
<template id="toggle">
  <span class="fa toggle" v-bind:class="{'fa-toggle-on': toggled, 'fa-toggle-off': !toggled, 'text-success': toggled, 'text-muted': !toggled}" @click="toggled = !toggled"></span> <span class="toggle-label" v-show="label">{{ label }}</span>
</template>

script.js

var Toggle = Vue.extend({
  template: '#toggle',
  props: ['toggled','label']
});
Vue.component('vue-toggle', Toggle)

new Vue({
  el: '#app',
  data: {
    toggled_1: 1,
    toggled_2: 0,
    toggled_3: 0,
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

style.scss

$purple: #5c4084;

body {
  background-color: $purple;
  padding: 50px;
  color: #555;
}
.fa {
  font-size: 40px;
  cursor: pointer;
}
.text-success {
  color: $purple;
}
.toggle-label {
    display: inline-block;
    padding: 2px 0 0 4px;
    vertical-align: top;
    font-size: 24px;
    color: #777;
}
.container {
  background-color: #fff;
  padding: 40px 80px;
  border-radius: 8px;
}
.heading {
  text-align: center;
  h1 {
    background: -webkit-linear-gradient(#fff, #999);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-align: center;
    margin: 0 0 5px 0;
    font-weight: 900;
    font-size: 4rem;
    color: #fff;
  }
  h4 {
    color: lighten(#5c3d86,30%);
    text-align: center;
    margin: 0 0 35px 0;
    font-weight: 400;
    font-size: 24px;
  }
}
.options {
  @media (min-width: 992px) {
    padding-top: 80px;
  }
}
.btn{
  outline: none !important;
}
.btn.btn-primary {
  background-color: $purple;
  border-color: $purple;
  outline: none;
  &:hover {
    background-color: darken($purple, 10%);
    border-color: darken($purple, 10%);
  }
  &:active, &:focus {
    background-color: lighten($purple, 5%);
    border-color: lighten($purple, 5%);
  }
}
.btn.btn-default {
  &:hover {
    background-color: darken($purple, 10%);
    border-color: darken($purple, 10%);
    color: #fff;
  }
  &:active, &:focus {
    background-color: lighten($purple, 5%);
    border-color: lighten($purple, 5%);
    color: #fff;
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />