dijitの縦のテキストTabContainerタブ

Question

dijit/layout/TabContainerには、タブのボタン/テキストが上、右、下、左に表示される場合があります。私は右にタブを取得したいです（tabPosition： "right-h"を使用します）。ただし、タブが右側にある場合でも、テキストは横方向に表示されます。 「right-h」は、「right-v」の計画があるかのように聞こえ、テキストも垂直に表示されますが、まだ実装されていないようです。

私のページで使用しているTabContainerのタブのテキストを縦に表示するにはどうしたらいいですか（他のタブは水平にレンダリングされたテキストで上にタブがあります）。

ありがとうございます！

Answer 1

私が想像することができる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>

このよう