Customizing ion-fab

Ionic Framework
1

Hi,

I want to style my fab button.
So, in my template I have

<ion-fab bottom right>
  <button ion-fab background="getFabGradient()" >
    <ion-icon name="add"></ion-icon>
  </button>
[...]
</ion-fab>

this works when

  getFabGradient() { 
    return "linear-gradient(darkorange, orange, green, darkblue, red)";
  }

It does not work when

  getFabGradient() { 
    return "conic-gradient(darkorange, orange, green, darkblue, red)";
  }

Why does the first work and the second doesn’t??
How do I get my conic gradient?

regards

2

hello i have solution for you :slight_smile:

you can use this code for apply gradient.

in html file

<ion-fab bottom right>
  <button ion-fab (click)="getFabGradient()" [class.gradient_background]  = "flag">
    <ion-icon name="add"></ion-icon>
  </button>
[...]
</ion-fab>

in scss

.gradient_background{
     background: conic-gradient(darkorange, orange, green, darkblue, red);
}

in ts file


flag = false;
constructor(){
}
getFabGradient(){
this.flag = true;
}

thanks

1 Like
3

hello abhayjani,

works :wink:

Thank you