Question

我需要使用ToggleButton来显示图像和一些文本，我希望按钮显示为启用（彩色图标和黑色文本），但我不希望现在允许单击/切换，因为此功能将晚一点来。我再次需要图标颜色和文本黑色但按钮不可点击（基本上应该看起来不像一个按钮，悬停时没有轮廓等）。

this.button = new ToggleButton({
                         "id": title,
                         "label": count,
                         "showLabel": true,
                         "iconClass": "eIcon",
                         "class": "buttonText",
                         "disabled": true,
                 });

我无法让CSS正常工作 - 我试图将CSS中的按钮颜色设置为：

.itpButtonText { color: black !important; }

但它永远不会被接受。也许我需要反过来，允许它启用，但不允许悬停或点击？

有人有任何建议吗？

Answer 1

首先，您是否需要使用ToggleButton来实现此功能？实际上，很容易使用两个div（一个用于img类，另一个用于文本）来实现你想要实现的相同效果，你只需要保持一个状态并根据这个状态，相应地设置它们。

如果您仍然需要使用toggleButton，您可以尝试为特定按钮覆盖一些默认样式的ToggleButton。使用检查器获取您需要更改的相应类名，在主题css文件中搜索它们，然后在您自己的css文件中覆盖它们。

例如，要覆盖悬停行为，您可能需要覆盖

.claro .dijitToggleButtonHover .dijitButtonNode {
  background-color: #86bdf2;
  color: #000000;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

与

.yourClass .claro  .dijitToggleButtonHover .dijitButtonNode {
   /* your styles */

}

但是你可能需要做很多这种覆盖，所以也许最好使用第一种方法创建自定义按钮。

Dojo JS ToggleButton显示为已启用但禁止单击/切换并悬停轮廓

1 个答案: