在 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 添加 class 而不是填充，在这种情况下是这样吗？

发生：

首选：（这是在 HTML 上设置的颜色作为属性 color='pmblue'）CSS 中离子按钮上的颜色指向文本颜色。

Answer 1

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

例如你可以这样做：

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

在 Ionic 6 中设置 css 的填充颜色属性

Setting the fill color attribute from css in Ionic 6

html

css

angular

ionic-framework

ionic6