Dijit TabContainer widget Icons

5
votes

Does anyone know, how to add an icon to the TabContainer widget? I chose the declerative example:

<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
   <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
      Lorem ipsum and all around...
   </div>
   <div dojoType="dijit.layout.ContentPane" title="My second tab">
      Lorem ipsum and all around - second...
   </div>
   <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
      Lorem ipsum and all around - last...
   </div>
</div>

But there is only a title attribute to set the title of the tab. How can i add a tag?

In this post, i found a solution to add a tag to the title:

I actually looked more into this and I found that this code works well:
<div id="mainTabContainer" dojoType="TabContainer" style="width: 100%; height: 100%"    selectedTab="tab1" >
<a dojoType="LinkPane" href="/path/to/pane/content" refreshOnShow="true" style="display:  none"><img src="path/to/your/image"/></a>

But the href attribute of the LinkPane confused me. I don`t need to link to another html document.

2
tabsdojo
the href is because of the <a> tag. Perhaps it will work the same if you use a <div> instead? - hugomg

2 Answers

9
votes

Take a look at the TabContainer demo. You can add icons to tabs by defining the iconClass:

<div id="tab3" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 3",
iconClass:"dijitEditorIcon dijitEditorIconSave", closable:true'>

It simply tells the tab which CSS class to use for the icon. You don't have to use Dojo's theme classes, you can define your own classes in your stylesheet. See the CSS files in dijit/icons.

BTW, the TabContainer demo uses HTML5-style attributes (e.g. data-dojo-type) and you use the old ones (dojoType). They're both OK, but from my experience if you mix them, weird things may happen, so it's better to choose one style and use it consistently.

1
votes

just inject as HTML into your title :)

var myTab = new ContentPane({
  title: "<span class='icon-class'></span></br>" + strTitle,
  id: "myTabId",
  content: new TabContent()
});
tabsControl.addChild(myTab);