CODEWITHSUNDEEP
ionic4
Stanton Roux
Stanton Roux

Reputation: 151

Ionic 4 Tabs styling

I am trying to give the tabs in a ionic 4 app a gradient background. I am also trying to set a different color (Gradient) background for each page. Controlling the style for the tabs in the scss for each page.

The desired affect is as below.

enter image description here

enter image description here

Upvotes: 2

Views: 3731

Answers (2)

Falyoun
Falyoun

Reputation: 3966

For <shadow-root> which indicates that the browser you're using supports Shadow DOM technique so you can access its elements by only their variables,So try the following 

ion-toolbar {
  --ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}

ion-tab-bar {
  --ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}

If it doesn't work just please detect father -i call it- or its wrapper and put it in advance of it,In another word

wrapper ion-tab-bar {
--ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}

wrapper refers to the element that wrapping ion-tab-bar

Upvotes: 1

Tomas Vancoillie
Tomas Vancoillie

Reputation: 3868

You can set a CSS gradient to the toolbar (top) and tabbar (bottom):

ion-toolbar{
  --background: linear-gradient(to right, #color1 0%, #color2 100%);
}

ion-tab-bar{
  --background: linear-gradient(to right, #color1 0%, #color2 100%);
}

In case you want to set the gradient for the whole app, place the CSS inside theme > variable.scss


Docs

https://ionicframework.com/docs/api/toolbar
https://ionicframework.com/docs/api/tab-bar

Upvotes: 0

Related Questions