Angular Bootstrap Toggle Switch Button

by

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




  

    

      

        
Angular Bootstrap Toggle Switch

        

      

    

    

      

        
Form Default

        

          

            
            
            
          

        

        

      

    

    

      

        
Form Horizontal

        

          

            
            

              
              
            

          

        

        

      

    

    

      

        
Form Inline


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.

Published by Rohit