How to stye segmented Bar Items


#1

Is it possible to style different backgound-color for each of the segmented bar items for example: the first item has background green and the rest have background blue?

I tried set the class as below but it does not work.

.segmented-bar {
selected-background-color: #4d7ea8;
color: #ffffff;
background-color: blue;
font-size: 12;
}

.segmented-bar .valid{
background-color: green;

}

<SegmentedBar #sb selectedIndex=“5” (selectedIndexChange)=“onSelectedIndexChange($event)” class=“segmented-bar”>
<SegmentedBarItem #general title=“Generals” class=“valid”>
<SegmentedBarItem #user title=“My Info” >
<SegmentedBarItem #description title=“Description” >
<SegmentedBarItem #document title=“Document” >
<SegmentedBarItem #recomend title=“Recomentation” >


#2

No, it’s not possible with CSS. But you might able to do that by writing some native code on respective platform (Set selected state drawables in Android / Set selected state colors in iOS).

If you are not familiar with native code, the easiest is to simulate your own segmented bar with NativeScript layouts and labels.


#3

Thanks manojdcoder, would you please give me an example for the second option please?