Ionic tabs customization in shadowDOM

Hello,

I need to customize my tab-bar icons in right side of the screen. I have attached my current output and i will explain my expected output. Could you please help to customize the shadowDOM .

Current Output:

Expected Output: (I manually changed the CSS properties in chrome)

If you want i will shared my code in github repo.

Thanks in advance.

Thanks,
Manivannan

You might or might not be able to customize it, depending of the available variables

As an introduction to styling in v4, I would suggest you to read https://blog.ionicframework.com/shadow-dom-in-ionic-and-why-its-awesome/, then maybe have a look to the different tutorials and videos of @joshmorony and then find some posts on the forum like How can i style a shadow DOM in Ionic 4

Hello @reedrichards,
I read out the article. But i don’t understand in coding level.
How to custmize ion-tabbar CSS properties in ionic v4 like i want to change the tabbar height and content alignment.

Thanks for your response.

This video maybe explains it too https://www.youtube.com/watch?v=_D1lCoYzivA

@reedrichards i tried so many ways but i cant customize the tabbar style. Could you help me to resolve the issue. If you need i will share my code in github repo.

Actually, What it happen. Tabbar will add dynamically in ion-tabs element. So am not able to customize the element.

what did you try? you didn’t displayed any codes in this post. which elements did you style? which css4 variables did you try? etc.

@reedrichards Am attached in the screen shot for this post.

  1. Actual Result - First screen
  2. Expected Result - Second Screenshot

I want to modify the tabbar like second screenshot. So where i can place the CSS in my code and how to override the shadowDOM host CSS properties

@reedrichards I shared my repo details below and attached the expected screen output. Could you please customize the tabbar in ionic v4 and CSS3.

https://github.com/Manivannandurairaj/ionic4-tabbar

Expected Output:

Thanks

So it doesn’t work with

ion-tabbar {
  --color: red;
  --background: grey;
  --color-selected: yellow;
 }

it’s what you meant?

Yes. It doesn’t work. You have any idea

Sorry I can’t help. I tried your app but it even doesn’t compile. Sorry I won’t be able to help much than that then. Hope someone could. Good luck

@reedrichards Thank you very much

I am facing same problem