Segmented Bar Custom Styling


selected-background-color and font size properties of SegmentedBar
don’t seem to work. Only background-color is working. Any suggestions on
what I am doing wrong?

My XML is:

    <SegmentedBar #sb [items]="items" (selectedIndexChange)="onChange(sb.selectedIndex)">
    <StackLayout visibility="{{ visibility1 ? 'visible' : 'collapsed' }}">
        <Label [text]="'The new selectedIndex is: ' + selectedIndex" class="m-15 h3 p-5 text-  center"></Label>
    <StackLayout visibility="{{ visibility2 ? 'visible' : 'collapsed' }}">
        <Label [text]="'The new selectedIndex is: ' + selectedIndex" class="m-15 h3 p-5 text-center"></Label>
    <StackLayout visibility="{{ visibility3 ? 'visible' : 'collapsed' }}">
        <Label [text]="'The new selectedIndex is: ' + selectedIndex" class="m-15 h3 p-5 text-center"></Label>

`My CSS is:

font-size: 10;
background-color: blue;


Try switching it to use a class, like .segmented-bar.
That’s what they do in the official {N} themes.


Thanks for the suggestion. Using a class does help set the font and the background color. However the segmented bar still does not use the selected-background-color option. Any suggestions?


Maybe another style is conflicting?

I inlined the template and styles, but this is an app that shows a styled SegmentedBar:

import { Component } from "@angular/core";
import {SegmentedBarItem} from "ui/segmented-bar";

    selector: "my-app",
    template: `
        .segmented-bar {
            selected-background-color: #4d7ea8;
            color: #4d7ea8;
            background-color: #f4faff;
            font-size: 10;
    <StackLayout class="p-20" verticalAlignment="middle">
        <Label text="Default"></Label>
        <SegmentedBar [items]="items"></SegmentedBar>
        <StackLayout class="hr-light m-y-30"></StackLayout>
        <Label text="Styled"></Label>
        <SegmentedBar [items]="items" class="segmented-bar"></SegmentedBar>
export class AppComponent {
    public items: Array<SegmentedBarItem>;

    constructor() {
        this.items = [];

        for (let i = 1; i <= 3; i++) {
            let item: SegmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
            item.title = i.toFixed();


Thank you for the example @jzgoda. I tried your code (putting the template directly into the component), While initially I was not able to get the desired selected background color. However, after switching between different apps on the device I saw that the selected background color had indeed changed. Thanks a lot for your help.


You’re welcome!

FYI, I only used the inline template/styles to have the full solution in a single component for demo purposes. Personally, I have my CSS and templates in their own files. But if you have it working, that gives you a starting point to work with :slight_smile: