我想将自定义 CSS 类添加到 dijit/layout/ContentPane,这样我就可以自己设置样式。
这是因为我的 ContentPanes 所在的 TabContainer 中有多个选项卡,我不想加倍边框。在选项卡周围使用边框将使边框加倍,因此我删除了选项卡的左边框。在 TabContainer 的第一个选项卡中,我也需要左边框。
为此,我尝试假设第一个 ContentPane 是一个自定义 CSS 类,它将执行此操作。
正如您看到我在这里写的那样,我没有找到执行此操作的方法。
我在 data-dojo-props 中尝试过
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" data-dojo-props="class:'firstTab'">
所以这没有用。我尝试像在带有 class="firstTab"的简单 HTML 元素中那样添加它
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" class="firstTab">
两种方式都没有将我的类添加到 ContentPane。
那么它是怎么做到的呢?
最佳答案
class
属性实际上并不用于这种目的,而是用于识别小部件的类型。
但是,class
属性应该起作用,因为声明性小部件通常保留其父属性。如果我有以下 HTML:
它最终被渲染成:
<div class="dijitContentPane test" data-dojo-type="dijit/layout/ContentPane" id="myContent" widgetid="myContent">
Hello
</div>
但是,请注意,当在 dijit/layout/TabContainer
中使用 dijit/layout/ContentPane
时,会添加很多额外的 CSS,可能会覆盖您自己的 CSS .
例如,要覆盖 dijit/layout/TabContainer
中选项卡的背景颜色,我必须使用以下 CSS 选择器:
.dijitTabContainerTop-dijitContentPane.test2 {
background-color: #D4D4D1;
}
演示:http://jsfiddle.net/Lcog9saj/
但是,请注意 TabContainer
生成的边框并不应用于 ContentPane
本身,而是应用于具有类名 .dijitTabContainerTop-container 的元素
(TabContainer
本身的一部分)。
如果这真的不起作用,那么您可以随时访问您要更改的小部件的 domNode
属性,例如:
require(["dijit/registry", "dojo/ready", "dojo/dom-class"], function(registry, ready, domClass) {
ready(function() {
domClass.add(registry
.byId("myContentPane")
.get("domNode"), "test2");
});
});
关于css - dijit/layout/ContentPane 的自定义 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30366930/