Just a fast test of a status toggle button using, bootstrap, vue.js, and fontawesome.
A Pen by Christophor Wilson on CodePen.
Just a fast test of a status toggle button using, bootstrap, vue.js, and fontawesome.
A Pen by Christophor Wilson on CodePen.
<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> | |
<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> | |
<vue-toggle :toggled.sync="<b>toggled_1</b>" label="<b>Enabled</b>"></vue-toggle> | |
</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> | |
<vue-toggle :toggled.sync="<b>toggled_2</b>" label="<b>Disabled</b>"></vue-toggle> | |
</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> | |
<vue-toggle :toggled.sync="<b>toggled_3</b>"></vue-toggle> | |
</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> |
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, | |
} | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> |
$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; | |
} | |
} |
<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" /> |