Tab container style

Ignition
1

I have tab container in which
Active tab - background color - Black and text color Orange ,i want to add box shadow for active tab. How i can do that ?

2

tab containers have a props.tabStyle.active property, you should be able to add boxShadow here

3

but it's not working

4

Sorry, but that isn’t nearly enough information to help you with.

What did you do? What did it look like? What were you expecting? Where did you do it?

1 Like
5

Does for me.
Now keep in mind that you may not see the shadow because the menu is "too small".
Try adding paddingBottom: 5px to the menuStyle property, see if you get some results.

6

I added box shadow for tabStyle.Active
-BoxShadow -(10px 10px #FFF)
I want outlet shadow effect for active tab ..

7

That's not even remotely the proper syntax for css properties.

image

1 Like
8

i think this works

9

If you want things to show properly, the next thing you need to do is add some padding to the menu style (or some margin + overflow: visible), then you'll probably want to get rid (or move) the horizontal line that messes things up
image

.menu-right, .tab-menu-item {
	border: none;
}

image

You may want to make that selector a bit more specific, in case you have other tab containers where you don't want to apply that style, or some other components that use the same classes.