Вертикальный текст в вкладках вкладки Tab-контейнера

Question

dijit/layout/TabContainer может иметь кнопки/тексты вкладок, отображаемые сверху, справа, снизу и слева. Я хотел бы получить вкладки справа (с помощью tabPosition: «right-h»), но даже если вкладки находятся справа, тексты по-прежнему отображаются горизонтально. «right-h» звучит так, как если бы планировалось «правое-v», чтобы текст отображался вертикально тоже, но это, похоже, еще не реализовано.

Как добиться вертикального отображения текстов вкладок в одном из TabContainers, используемых на моей странице (другие должны иметь вкладки сверху с горизонтально отображаемыми текстами).

Спасибо!

Answer 1

Один из способов, который я могу себе представить, состоит в том, чтобы разделить название вкладок на несколько строк.

Как это:

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>

Или путем изменения 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>