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

CHAHI Saad
  • 309
  • 4
  • 15
Rowan de Graaf
  • 65
  • 8

1 Answers1

1

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' : ''" }">
Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • 1
    You are correct. In this case I'd rather not hardcode it in the template. I did not know this worked. I can "define a custom color" for this specific element now tho. The correct syntaxt is [color]="tabSelected == 'colleagues'? 'pmblue' : ''" You mind adjusting it in yoru answer, ill accept it. – Rowan de Graaf Jan 27 '22 at 14:54
  • 1
    I corrected the syntax. – Joosep Parts Jan 28 '22 at 04:05