JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
JavaScript
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dijit/Dialog", "dojo/dom-construct",
"dojo/dom-class", "dojo/domReady!"],
function(BorderContainer, TabContainer, ContentPane, Dialog,
domConstruct, domClass) {
domClass.add(document.body, "tundra");
var bc;
function createDialogContent() {
// first create the BorderContainer without any arguments.
bc = new BorderContainer({
style: "height: 400px;"
}, domConstruct.create("div", null, dialog.containerNode, "last"));
// then create your TabContainer with region center.
let tc = new TabContainer({
region: 'center'
}, document.createElement("div"));
// add it to your BorderContainer
bc.addChild(tc);
// then create three tab panes (ContentPane) and add them to your TabContainer
let cp = new ContentPane({
content: "My tab pane!",
title: "My tab title"
}, document.createElement("div"));
tc.addChild(cp);
let cp2 = new ContentPane({
content: "My second tab pane!",
title: "My second tab title"
}, document.createElement("div"));
tc.addChild(cp2);
let cp3 = new ContentPane({
content: "My closable tab pane!",
title: "My closable tab title",
closable: true
}, document.createElement("div"));
tc.addChild(cp3);
// call startup on your BorderContainer. startup of BorderContainer will call also the startup methods of all children (TabContainer, ContentPane's).
bc.startup();
}
var dialog = new Dialog({
style: "width: 500px;",
title: "My Dialog!"
});
// uncomment this
createDialogContent();
dialog.show();
// comment this
// dialog.show();
// createDialogContent();
});