Windows 10 toggle button directive

Developer
Robert Lowe
Size
4,256 Kb
Views
60,720
  1. Windows 10 toggle button directive Previews
  2. Windows 10 toggle button directive HTML Codes
  3. Windows 10 toggle button directive CSS Codes
  4. Windows 10 toggle button directive JS Codes

How do I make an windows 10 toggle button directive?

Angular implementation of this great pen: http://codepen.io/kunukn/pen/Krqopm. What is a windows 10 toggle button directive? How do you make a windows 10 toggle button directive? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.

Windows 10 toggle button directive Previews
IQ Test

Windows 10 toggle button directive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Windows 10 toggle button directive</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pattern-color"></div>
<div ng-app="angularPageApp" ng-controller="angularPageAppCtrl" class="app-container"> <div class="material"> <toggle-btn value="toggleBtnValue" action="onToggleBtnChange"></toggle-btn> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Windows 10 toggle button directive - Script Codes CSS Codes

*,
*::before,
*::after { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/shinecaro.png"); font-size: 66.5%;
}
body .pattern-color { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(122, 224, 180, 0.5);
}
.app-container { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: 100vh;
}
.material { background-color: white; padding: 5em; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); z-index: 10;
}
.disapper-from-screen, .toggle-btn .toggle input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.toggle-btn { position: relative;
}
.toggle-btn .toggle { display: table; -webkit-tap-highlight-color: transparent; margin-bottom: 1rem; margin: 0; padding: 0;
}
.toggle-btn .toggle input:focus + div { text-decoration: underline;
}
.toggle-btn .toggle > div { cursor: pointer; border-radius: 2rem; width: 5rem; height: 2rem; background: white; border: 2px solid #9EE493; user-select: none; position: relative; transition: 200ms ease-out; font-size: 0;
}
.toggle-btn .toggle > div:hover { box-shadow: 0 0 6px #79da6a;
}
.toggle-btn .toggle > div:before { will-change: translate; display: block; position: absolute; top: calc(50% - .5rem); left: .5rem; content: ''; width: 1rem; height: 1rem; background: #9EE493; border-radius: 50%; transition: 200ms;
}
.toggle-btn .toggle > div:after { font-size: 1rem; font-weight: bold; position: absolute; right: -50%; top: 50%; transform: translateY(-50%); content: attr(data-off); pointer-events: none; color: #67d556;
}
.toggle-btn .toggle input:checked + div { background: #9EE493; border-color: #9EE493;
}
.toggle-btn .toggle input:checked + div:before { color: #9EE493; transform: translateX(280%); transform: translateX(calc(2.5*100% + 4px)); background: white;
}
.toggle-btn .toggle input:checked + div:after { content: attr(data-on);
}

Windows 10 toggle button directive - Script Codes JS Codes

var ToggleBtnModule = angular.module('toggleBtnModule', ['ngSanitize']);
ToggleBtnModule.directive('toggleBtn', function() { return { restrict: 'E', replace: true, scope: { value: '=', action: '=' }, controller: function($scope) {}, template: [ '<div class="toggle-btn">', '<label class="toggle">', '<input ng-model="value" ng-checked="value" type="checkbox" ng-click="action(value)"/>', '<div data-off="Off" data-on="On"></div>', '</label>', '</div>' ].join(''), link: function(scope, element, attrs) {} };
});
// Usage
var PageApp = angular.module('angularPageApp', ['ngSanitize', 'toggleBtnModule']);
PageApp.controller('angularPageAppCtrl', function($scope) { $scope.toggleBtnValue = false; $scope.onToggleBtnChange = function(newVal) { console.log('new toggle value: ', $scope.toggleBtnValue); };
});
Windows 10 toggle button directive - Script Codes
Windows 10 toggle button directive - Script Codes
Home Page Home
Developer Robert Lowe
Username rlo206
Uploaded July 23, 2022
Rating 4
Size 4,256 Kb
Views 60,720
Do you need developer help for Windows 10 toggle button directive?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Lowe (rlo206) Script Codes
Name
A Pen by Robert Lowe
CSS Color Wheel Loaders
Simple changelog display with AngularJS and Flexbox
Editable Table Concept
Crazy Tables
Semantic Element Document Outline
Animated slider in pure angular
Whirlpool Spinner with 4 sizes
Customizable ripples with angular
Fly-Through-Loader
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!