如何从默认值中单击时更改离子项目分隔符的颜色

Question

我将ng-click分配给离子项目分隔符，如下所示：

<div class="item item-divider"  ng-click="toggleShowingProfile()">
  PROFILE
</div>

当点击它时，它会暂时变灰。我想要一个更微妙的效果。我希望它的颜色稍微浅一点，所以我试图改变这样的不透明度：

.item-divider{
  background-color: #336688;
  color: white;
}
.item-divider:active{
  opacity: 0.8;
}

我的CSS代码似乎没有任何区别。有没有办法覆盖默认行为？

Answer 1

仅限CSS

覆盖它的最简单方法是给它一个自定义类并将其用作CSS选择器。此外，item在点击时添加了activated类，因此:active不会改变任何内容。要覆盖你需要做这样的事情：

HTML：

<div class="item item-divider custom-item-divider" ng-click="toggleShowingProfile()">
  PROFILE
</div>

CSS：

.custom-item-divider.item-divider {
  background-color: #336688;
  color: white;
}
.custom-item-divider.item.activated {
  background-color: #336688;
  opacity: 0.8;
}

Codepen演示：http://codepen.io/brandyshea/pen/epEedW

注意：您也可以使用<ion-item>而不是<div>类使用item。

的Sass

如果您使用的是Sass，则可以直接覆盖Sass变量：

$item-divider-bg
$item-divider-color

$item-default-active-bg        
$item-default-active-border

请在此处查看以下变量：https://github.com/driftyco/ionic/blob/master/scss/_variables.scss#L311 和这里： https://github.com/driftyco/ionic/blob/master/scss/_variables.scss#L372

您需要覆盖自己的Sass文件中的变量，而不是直接覆盖Ionic的Sass文件。

如果您有任何疑问，请与我联系！

Answer 2

<div class="item item-divider"  ng-click="toggleShowingProfile()">
  PROFILE
</div>