<div class="panel"> <p> <label id="wf">Wi-Fi <d-switch id="sw1" checked="true"></d-switch> </label> </p> <p> <label id="bt">Bluetooth <d-switch id="sw2" checkedLabel="ENABLED" uncheckedLabel="DISABLED"></d-switch> </label> </p> </div>
body { font-family: sans-serif; } p { line-height: 2.2em; } .d-switch { margin-left: 3px; margin-right: 3px; float: right; } #wf .d-switch-width { width: 50px; } #wf .d-switch-leading { background-color: #5bc0de; } #bt .d-switch-width { width: 130px; } #bt .d-switch-leading { font-weight: normal; } #bt .d-switch-trailing { font-weight: normal; background-color: #333333; color: #eeeeee; } .panel { flex-direction: column; display: flex; }
require.config({ baseUrl: "http://ibm-js.github.io/libraries/master" }); require(["deliteful-build/layer"], function () { require([ "deliteful/Switch"], function () { document.body.style.display = ""; }); });