Issue
Hello everyone I want to set the ion-tab-bar background to gradient like the toolbar in this image.
What I have tried. (sets the toolbar as expected but doesn't work as intended for the tab-bar)
--ion-toolbar-background: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
--ion-toolbar-color: var(--ion-color-light);
--ion-tab-bar-background: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
--ion-tab-bar-color: var(--ion-color-light);
Checking Ionic 4 Tabs styling I tried the following but still same result.
ion-tab-bar {
--ion-background-color: linear-gradient(to right, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%) !important;
}
ion-tabs ion-tab-bar {
--ion-background-color: linear-gradient(to right, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%) !important;
}
All help is appreciated thanks.
Solution
I have fixed it using
ion-tab-bar {
--background: transparent;
background-image: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
}
Answered By - Awab
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.