<d-linear-layout class="full-screen"> <div class="header">Header</div> <d-list class="fill"> {"label": "Item 1"}, {"label": "Item 2"}, {"label": "Item 3"}, {"label": "Item 4"}, {"label": "Item 5"}, {"label": "Item 6"}, {"label": "Item 7"}, {"label": "Item 8"}, {"label": "Item 9"}, {"label": "Item 10"} </d-list> <div class="footer">Footer</div> </d-linear-layout>
html, body, .full-screen { width: 100%; height: 100%; } * { box-sizing: border-box; margin: 0; padding: 0; } .header, .footer { background-color: #4882CA; color: white; }
require.config({ baseUrl: "http://ibm-js.github.io/libraries/master/" }); require(["deliteful-build/layer"], function () { require([ "deliteful/LinearLayout", "deliteful/list/List" ], function (){ document.body.style.display = ""; }); });