Segmented Bar Custom Styling


#1

Hi,
The
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:

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

`My CSS is:

SegmentedBar{
selected-background-color:yellow;
font-size: 10;
background-color: blue;
}

#2

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


#3

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?


#4

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";

@Component({
    selector: "my-app",
    template: `
    <style>
        .segmented-bar {
            selected-background-color: #4d7ea8;
            color: #4d7ea8;
            background-color: #f4faff;
            font-size: 10;
        }
    </style>
    <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>
    </StackLayout>
`
})
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();
            this.items.push(item);
        }
    }
}


#5

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.


#6

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: