html - 在 Ionic 6 中从 css 设置填充颜色属性

Question

<div class="button-bar">
      <ion-button size='small' [fill]="tabSelected == 'details'? 'solid' : ''" (click)='selectTab("details")'>
        <ion-icon size='small' name="information-circle-outline"></ion-icon>
      </ion-button>

      <ion-button size='small' [fill]="tabSelected == 'customer' ? 'solid' : ''" (click)='selectTab("customer")'>
        <ion-icon size='small' name="person-circle"></ion-icon>
      </ion-button>

      <ion-button size='small' [fill]="tabSelected == 'colleagues' ? 'solid' :''" (click)='selectTab("colleagues")'>
        <ion-icon size='small' name="people-outline"></ion-icon>
      </ion-button>
    </div>

按下按钮时，我想设置按钮的填充颜色。在这种情况下，我将 tabSelected 设置为某个值，然后基于该值使填充“实心”与否。

我想从 Html 外部管理所有颜色，从而通过 CSS 设置它。

ion-button {
  --color: var(--ion-color-pmblue-contrast);
  --background: var(--ion-color-pmblue);
}

这会将按钮的背景设置为蓝色，但在这种情况下，我只想让活动按钮具有这种状态。我考虑过用 ngclass 添加一个类，而不是填充，在这种情况下是这样吗？

发生：

首选：（这是在 HTML 上将颜色设置为属性 color='pmblue'）CSS 中 ion-button 上的颜色指向文本颜色。

Answer 1

如果我错了，请纠正我，但 ionc 图标和按钮没有颜色属性吗？

例如，您可以这样做：

 <ion-button size='small' [fill]="tabSelected == 'details'? 'solid' : ''" (click)='selectTab("details")' [color]="tabSelected == 'colleagues'? 'pmblue' : ''" }">