dijit의 세로 텍스트 TabContainer 탭

Question

dijit/layout/TabContainer에는 탭 버튼/텍스트가 위쪽, 오른쪽, 아래쪽 및 왼쪽에 표시 될 수 있습니다. TabPosition : "right-h"를 사용하여 오른쪽에 탭을 표시하고 싶지만 탭이 오른쪽에 있더라도 텍스트는 여전히 가로로 표시됩니다. "right-h"는 텍스트가 수직으로 표시되게하는 "right-v"계획이있는 것처럼 들리지만 아직 구현되지 않은 것 같습니다.

내 페이지에서 사용중인 TabContainer 중 하나에서 탭 텍스트의 수직 표시를 얻는 방법 (다른 탭은 수평으로 렌더링 된 텍스트가있는 탭이 있어야 함).

감사합니다.

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>

을