数字选项卡容器选项卡中的垂直文本

Question

dijit/layout/TabContainer 选项卡 buttons/texts 可能会显示在顶部、右侧、底部和左侧。我想在右侧获得标签（使用 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>

数字选项卡容器选项卡中的垂直文本

Vertical Text in dijit TabContainer Tabs

dojo

tabcontainer