<d-responsive-columns id="rc" class="fill" breakpoints="{'small': '500px', 'medium': '900px', 'large': ''}"> <div layout="{'small': '100%', 'medium': '200px', 'large': '10%'}" class="red">A</div> <div layout="{'small': 'hidden', 'medium': 'fill', 'large': '30%'}" class="blue">B</div> <div layout="{'small': 'hidden', 'medium': 'hidden', 'large': '60%'}" class="green">C</div> </d-responsive-columns> <div class="centered"> <span>Screen class: </span><span id="currentSize"></span><br> Resize this frame width to change the screen class.<br>↔ </div>
body { margin: 0; } #rc { width: 100%%; height: 200px; } .centered { text-align: center; } .red { background-color: #D9534F; } .blue { background-color: #5BC0DE; } .green { background-color: #5CB85C;}
require.config({ baseUrl: "http://ibm-js.github.io/libraries/master", }); require(["deliteful-build/layer"], function () { require(["deliteful/ResponsiveColumns", "delite/theme!delite/themes/{{theme}}/global.css", // page level CSS "requirejs-domready/domReady!"], function () { rc.deliver(); currentSize.innerHTML = rc.screenClass; rc.on("change", function(event){ currentSize.innerHTML = event.screenClass;}); document.body.style.display = ""; }); });