How to stye segmented Bar Items


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” >


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.


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