Angular Bootstrap Toggle Switch Button

Here the designer has used Angular Bootstrap to accomplish the Toggle Switch. There are a total of three switch examples whose function are same whereas the sizes differs. The $switchOffColor and $switchOnColor is used to switch between the colors during the toggle. As all the button animation occurs inside the button you can utilize this button in structures, sites, and control panels.On the off chance that you like to be innovative, you can utilize diverse shading plans according to your structure necessity.

Angular Bootstrap Toggle Switch Button

HTML

 
<div class="app" ng-app="app" ng-controller="mainCtrl as vm">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Angular Bootstrap Toggle Switch</h1>
        <hr/>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <h2>Form Default</h2>
        <div class="form">
          <div class="form-group">
            <label for="cb1">label cb1</label>
            <input class="switchCheckbox checkbox" id="cb1" type="checkbox"/>
            <toggle-switch toggle-state="false"></toggle-switch>
          </div>
        </div>
        <hr/>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <h2>Form Horizontal</h2>
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-xs-2" for="cb2">label cb2</label>
            <div class="col-xs-10">
              <input class="checkbox switchCheckbox" id="cb2" type="checkbox"/>
              <toggle-switch toggle-state="true"></toggle-switch>
            </div>
          </div>
        </div>
        <hr/>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <h2>Form Inline</h2>
        <div class="form-inline">
          <div class="form-group">
            <label for="cb3">label cb3</label>
            <input class="checkbox switchCheckbox" id="cb3" type="checkbox"/>
            <toggle-switch toggle-state="true" toggle-size="32" toggle-br="0.15"></toggle-switch>
          </div>
        </div>
        <hr/>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="templ.toggle">
    <div class="toggleSwitchWrap" ng-class="{'switchOn':toggleState }" ng-style="vm.wrapStyle">
      <div class="toggleBase" ng-style="vm.baseStyle">
        <div class="toggleSwitch" ng-style="vm.switchStyle"></div>
      </div>
    </div>
  </script>
</div>


CSS

input.switchCheckbox {
  display: none !important;
}
 
.toggleSwitchWrap .toggleBase {
  width: 4em;
  height: 2em;
  background: #ccc;
  -webkit-transition: background 0.1s;
  transition: background 0.1s;
}
.toggleSwitchWrap .toggleSwitch {
  width: 2em;
  height: 2em;
  background: white;
  border: 0.25em solid #ccc;
  margin-left: 0;
  -webkit-transition: margin-left 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  transition: margin-left 0.25s cubic-bezier(0.77, 0, 0.175, 1);
}
.toggleSwitchWrap.switchOn .toggleBase {
  background: #8BC34A;
}
.toggleSwitchWrap.switchOn .toggleSwitch {
  margin-left: 2em;
  border-color: #8BC34A;
}
 
.form-inline .toggleSwitchWrap {
  display: inline-block;
}


JS

const foo = 'dfsfsfdfsdfsfffdsfsfsdfdsfsdf';
 
angular.module('app', []).
controller('mainCtrl', mainCtrl).
directive('toggleSwitch', toggleSwitch);
 
 
mainCtrl.$inject = ['$scope'];
function mainCtrl($scope) {
  const vm = this;
  vm.toggleState = true;
}
 
function toggleSwitch() {
  const directive = {
    replace: true,
    scope: {
      toggleState: "=",
      toggleSize: "=",
      toggleBr: "=" },
 
    templateUrl: 'templ.toggle',
    link: linkFunc,
    controller: ctrlr,
    controllerAs: 'vm',
    bindToController: true };
 
  return directive;
  function linkFunc(scope, el, attr) {
    el.on('click', e => {
      scope.toggleState = !scope.toggleState;
      scope.$apply(scope);
      console.log(scope);
    });
  }
  function ctrlr($scope) {
    const vm = this;
    const ts = vm.toggleSize | 16;
    const tbr = vm.toggleBr | 1;
 
    vm.wrapStyle = {
      'font-size': `${ts}px` };
 
    vm.baseStyle = {
      'border-radius': `${tbr}em` };
 
    vm.switchStyle = {
      'border-radius': `${tbr}em` };
 
    console.log(vm);
  }
}

See live demo and download source code.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by z3vin. Visit their official repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.