dojo - Vertical Text in dijit TabContainer Tabs -
dijit/layout/tabcontainer may have tab buttons/texts displayed on top, right, bottom , left. i'd tabs on right (using tabposition: "right-h"), if tabs on right, texts still displayed horizontally. "right-h" sounds if there plans "right-v", have texts displayed vertically, too, seems not implemented yet.
how can achieve vertical display of tab texts in 1 of tabcontainers in use in page (others shall have tabs on top horizontally rendered texts).
thanks!
one way can imagine split title of 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({ // pass title: attribute, this, we're stealing 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 , around... </div> <div class="tc1cp" title="my second tab"> lorem ipsum , around - second... </div> <div class="tc1cp" title="my last tab"> lorem ipsum , around - last... </div> </div> </div>
or changing 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({ // pass title: attribute, this, we're stealing 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 vertical-lr ie10 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 , around... </div> <div class="tc1cp" title="my second tab"> lorem ipsum , around - second... </div> <div class="tc1cp" title="my last tab"> lorem ipsum , around - last... </div> </div> </div>
Comments
Post a Comment