更改 dijit 布局选项卡容器的选项卡颜色

Question

我正在尝试更改 dijit 布局 tabcontainer 的标题文本颜色，以便在选项卡处于活动和非活动状态时使用。

有谁知道标签容器标题颜色的 css 属性名称是什么，或者我可能在哪里找到它们？

我使用的是 dojo 版本 1.12

谢谢

皮特

Answer 1

您可以使用 .tabLabel css class 来更改 tabcontainer 的文本颜色，如果您想在 tab 的活动状态下设置颜色，只需检查 .dijitTabChecked .tabLabel .

请参阅下面的工作片段：

require([
 "dojo/query",
  "dojo/on",
 "dojo/dom-style",
  "dijit/layout/TabContainer", 
  "dijit/layout/ContentPane",
  "dojo/domReady!"
], function(query,On,domStyle,TabContainer,ContentPane) {
  
  var tc = new TabContainer({
    style: "height: 100px; width: 100%;"
  },"tabContainer");

  var cpOrg = new ContentPane({
       title: "Tabe one",
       content: "Content of tab 1"
  });
  
  tc.addChild(cpOrg);
 
  var cpShared = new ContentPane({
       title: "Tabe two",
       content: "Content of tab 2"
  });
  tc.addChild(cpShared);

  var cpPrivate = new ContentPane({
       title: "Tabe three",
       content: "Content of tab 3"
  });
  
  tc.addChild(cpPrivate);
  tc.startup();
 
  
  
});

#tabContainer .tabLabel {
  color:green;
  
}

#tabContainer .dijitTabChecked .tabLabel {
  color:red;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div id="tabContainer"></div>
</div>

更改 dijit 布局选项卡容器的选项卡颜色

change tab color of dijit layout tabcontainer

css

dojo

dijit.layout