JSFiddle - React, Tailwind, and code Playground
ContentPane + smoothScroll example
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<div id="appLayout" class="demoLayout"></div>
CSS
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}
#appLayout {
height: 100%;
}
#leftAccordion {
width: 12em;
}
JavaScript
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
// Close Sidebar - remove draggable Splitter
function toggleSidebar(appLayout, contentAccordion) {
var panelIndex = appLayout.getIndexOfChild(contentAccordion);
if(panelIndex >= 0) {
appLayout.removeChild(contentAccordion);
} else {
appLayout.addChild(contentAccordion);
}
}
//Close Sidebar - leave draggable Splitter
function toggleSidebarWidth(appLayout, contentAccordion) {
var size = dojo.marginBox(contentAccordion.domNode);
if(size.w > 0) {
dojo.marginBox(contentAccordion.domNode, {w: 0});
} else {
dojo.marginBox(contentAccordion.domNode, {w: 100});
}
appLayout.resize();
}
dojo.ready(function() {
var appLayout,
contentAccordion,
accordionPane1,
contentTabs,
tabPane1;
// create the BorderContainer and attach it to our appLayout div
appLayout = new dijit.layout.BorderContainer({
design: "sidebar"
}, dojo.byId("appLayout"));
// create the AccordionContainer
contentAccordion = new dijit.layout.AccordionContainer({
region: "left",
id: "leftAccordion",
splitter: "true",
minSize: "0"
});
accordionPane1 = new dijit.layout.ContentPane({
title: "Section 1",
content: "<h1>Stuff</h1>"
});
// Add pane to the AccordionContainer
contentAccordion.addChild(accordionPane1);
// add the AccordionContainer to the BorderContainer
appLayout.addChild(contentAccordion);
// create the TabContainer
contentTabs = new dijit.layout.TabContainer({
region: "center",
id: "contentTabs",
tabPosition: "top"
});
tabPane1 = new dijit.layout.ContentPane({
title: "Tab1",
id: "Tab1",
...