dojotabcontainer

Vertical Text in dijit TabContainer Tabs

dijit/layout/TabContainer may have the tab buttons/texts displayed on top, right, bottom and left. I'd like to get tabs on the right (using tabPosition: "right-h"), but even if the tabs are on the right, the texts are still displayed horizontally. "right-h" sounds as if there were plans for a "right-v", to have texts displayed vertically, too, but this seems to be not implemented yet.

How can I achieve vertical display of the tab texts in one of the TabContainers in use in my page (others shall have tabs on top with horizontally rendered texts).

Thanks!

Solution

  • One way I can imagine is to split the title of the tabs accros multiple lines.

    Like this:

    require([
    "dojo/dom-attr", "dojo/query",
    "dijit/layout/TabContainer", "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(attr, query, TabContainer, ContentPane){

    query(".tc1cp").forEach(function(n){
        new ContentPane({
            // just pass a title: attribute, this, we're stealing from the node
            title: attr.get(n, "title").split('').join('<br />')
        }, n);
    });
    var tc = new TabContainer({
        style: attr.get("tc1-prog", "style"),
        tabPosition: 'left-h'
    }, "tc1-prog");
    tc.startup();
});
    .tabLabel {
    line-height: 1;
    text-align: center;
}
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">

<div class="tundra">
  <div id="tc1-prog" style="width: 400px; height: 500px;">
    <div class="tc1cp" title="My first tab">
      Lorem ipsum and all around...
    </div>
    <div class="tc1cp" title="My second tab">
      Lorem ipsum and all around - second...
    </div>
    <div class="tc1cp" title="My last tab">
      Lorem ipsum and all around - last...
    </div>
  </div>
</div>

    Or by changing the writing-mode:

    require([
    "dojo/dom-attr", "dojo/query",
    "dijit/layout/TabContainer", "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(attr, query, TabContainer, ContentPane){

    query(".tc1cp").forEach(function(n){
        new ContentPane({
            // just pass a title: attribute, this, we're stealing from the node
            title: attr.get(n, "title")
        }, n);
    });
    var tc = new TabContainer({
        style: attr.get("tc1-prog", "style"),
        tabPosition: 'left-h'
    }, "tc1-prog");
    tc.startup();
});
    .tabLabel {
    writing-mode: tb-rl; /*Note: correct value is vertical-lr but IE10 does not support it*/
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">

<div class="tundra">
  <div id="tc1-prog" style="width: 400px; height: 500px;">
    <div class="tc1cp" title="My first tab">
      Lorem ipsum and all around...
    </div>
    <div class="tc1cp" title="My second tab">
      Lorem ipsum and all around - second...
    </div>
    <div class="tc1cp" title="My last tab">
      Lorem ipsum and all around - last...
    </div>
  </div>
</div>