Search code examples
htmlcssangularionic-frameworkionic6

Setting the fill color attribute from css in Ionic 6

<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>

When pressing a button I'd like to set the fill color of the button. In this case, I set the tabSelected on a certain value and then based on that make the fill "solid" or not.

I'd like to manage all colors from outside of the Html and thus set it through CSS.

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

This sets the background of the button to the blue, but in this case, I only want to have the active one have this state. I've thought about adding a class with ngclass, instead of for the fill, is that the way to go in this case?

Happening: with background and color set

Preferred: (this is with color set on the HTML as attribute color='pmblue') color on ion-button in CSS points to the text-color.

with color attribute on html item

Solution

  • Correct me if I'm wrong but doesn't ionc icon and button have color property?

    E.g you could do:

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