ons-switch


  • Onsen UI

    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.


Log in to reply