ons-switch
-
Switch component. The switch can be toggled both by dragging and tapping. Will automatically displays a Material Design switch on Android devices.
Click here to see the original article
-
This component is broken. You can click the ons-switch, but the value is not being output and the checkbox state is not changed. You should really, really consider writing tests to flag this kind of error before release.
-
@milkisevil Whats not working? Here is a complete working example. Also, I know they unit test but I can’t remember what framework they use off the top of my head.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" /> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'> <title>Onsen UI Forum Help by Munsterlander</title> <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.3/css/onsenui.css" type="text/css" media="all" /> <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.3/css/onsen-css-components.css"> <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.3/js/onsenui.js"></script> <script src="components/loader.js"></script> <script> ons.disableAutoStyling(); if (localStorage.getItem("switch") === null) { localStorage.setItem('switch', 'true'); } ons.ready(function(){ document.getElementById('switch').checked = (localStorage.getItem("switch") === 'true'); document.getElementById('switch').addEventListener('change', function(e) { localStorage.setItem('switch', e.target.checked.toString()); document.getElementById('output').innerHTML = e.target.checked.toString(); }); }); </script> </head> <body> <ons-page> <ons-switch id="switch"></ons-switch> <div id="output"></div> </ons-page> </body> </html>
Edit: Just saw this is in Angular 2. I have also observed the bug for Angular but no Vanilla.