在离子按钮上设置颜色取消悬停

Posted 2023-03-06

【中文标题】在离子按钮上设置颜色取消悬停

【英文标题】：setting color on ion-button cancel hover

【发布时间】：2021-06-18 09:53:26

【问题描述】：

我正在为我的应用程序制作一个按钮栏，并且我正在尝试通过按钮的状态（false、true）来更改按钮的颜色。

现在按钮以绿色开始，而当单击它的白色时悬停是浅绿色，单击它后按钮变为白色并且悬停不再起作用（悬停时没有任何反应）。我尝试通过 DOM 更改按钮的类，但按钮消失了。

html

    <ion-button *ngIf="getAudio() !== undefined" class="musicIcon" id="musicIcon" fill="clear" button (click)="musicToggle()">
      <audio id="backgroundAudio" src="getAudio()"></audio>
      <ion-icon slot="icon-only" name="musical-notes"></ion-icon>
    </ion-button>

CSS

.musicIcon
    --color: #047E00;
    --color-hover: #A9FEA6;

JS

  musicToggle() 
    this.musicState = !this.musicState;
    const icon = document.getElementById("musicIcon");
    const audio = document.getElementById("backgroundAudio") as any;
    if (this.musicState) 
      audio.muted = true;
      icon.style.color = 'white';
     else 
      audio.muted = false;
      icon.style.color = '#047E00';
    
  

【参考方案1】：

我认为不改变 javascript 逻辑中的样式是有意义的，而是尽可能多地将外观留给 Ionic。主要问题似乎是，您用静态值覆盖颜色样式，而 Ionic 会动态使用 --color 或 --color-hover 的值。

首先，你知道Ionic's theming吗？如果您将绿色定义为主要颜色，则您的 <ion-button>s 将具有默认颜色，您不必编写自定义类。

如果您希望按钮在this.musicState === true 中具有不同的颜色，最简单的方法是通过color-attribute 直接在模板中定义：

 <ion-button *ngIf="getAudio() !== undefined" [color]="musicState ? 'light' : 'primary'" class="musicIcon" id="musicIcon" fill="clear" button (click)="musicToggle()">
  <audio id="backgroundAudio" src="getAudio()"></audio>
  <ion-icon slot="icon-only" name="musical-notes"></ion-icon>
</ion-button>

通过此调整，您可以删除 CSS 类，并且您的 musicToggle() 函数将变为以下行：

  musicToggle() 
    this.musicState = !this.musicState;
    const icon = document.getElementById("musicIcon");
    const audio = document.getElementById("backgroundAudio") as any;