时间戳

首页 > 解决方案 > 离子按钮上的 CSS 状态未应用

css - 离子按钮上的 CSS 状态未应用

问题描述

我试图在单击 a 时应用背景颜色，或者在它用 Ionic 4 填充按钮后ion-button保留它。ion-ripple

我尝试在其中应用自定义 css 状态，global.scss但它并没有真正起作用，因为活动状态看起来在您单击按钮后很快被删除（添加并在半秒后删除）：

ion-button {
    &:active {
        color: red;
    }
    &:visited {
        background-color: black !important; // --background didn't change anything here
    }
}

我也尝试了--background-activatedwhich 有效，但没有我想要的效果。单击按钮后，我想保留波纹背景。

到处寻找ion-ripple配置，但没有这样的东西可以让它持续存在。一个解决方案是使用ion-ripple组件本身，但我想避免这种情况，因为这意味着要遍历整个应用程序并替换每个ion-button...

那么如何ion-button在单击后获得通用以保持背景颜色？

标签： cssangularionic-frameworkionic4

解决方案

你可能也见过这个。查看 ion-ripple 组件源，它看起来有一个 removeRipple 函数，可以在 200 毫秒后移除波纹。我看不到任何地方可以让你添加配置来改变它并永远保持涟漪效应。

但也许使用 NgClass 可能是一个可能的解决方案。我在想这样的事情......

home.page.html

<ion-button (click)="clickAction()" [ngClass]="{'clicked':beenClicked}">
  Change Color When Clicked
</ion-button>

home.page.ts

export class HomePage {
  beenClicked: boolean = false;

  clickAction() {
    this.beenClicked = true;
  }

}

home.page.scss

.clicked {
  --background: green;
}

您可以将样式移动到 global.scss 并使其随处可用，尽管您可能仍然必须在每个组件中拥有布尔属性，除非您有服务或某种状态管理来帮助跟踪所有按钮状态为你。

希望这可以帮助。

推荐阅读