ons-switch

OnsenUI

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

milkisevil

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.

munsterlander

@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.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-switch