Nativescript: CSS support for additional UI widgets/components

Created on 5 Dec 2016 · 6Comments · Source: NativeScript/NativeScript

Some widgets can only be styled via inline properties. It would be great if these could be abstracted and styled via CSS. Specific examples:

SegmentedBar

background color is set with selectedBackgroundColor
active text color is set with selectedTextColor

TabView

background color is set with tabsBackgroundColor
active text color is set with selectedColor
text size appears to be unable to set with css at all

SearchBar

doesn't appear to have any ability to style?

css question

Source

rdlauer

Most helpful comment

Excuse me for my mistake, however in my further research I found that selected-text-color is not valid SegmentedBar property.
I also found that, backgroundColor could be set to SearchBar component, which will replace the gray background for iOS.
Regarding to the last point about the ListView in iOS, I verified the case with setting background to the component and everything seems to work as expected. For iOS background should be also set to the ListView items main Layout, which by default is set to white in iOS. I update the example in my previous comment.

Regards,
@tsonevn

tsonevn on 7 Dec 2016

👍2

All 6 comments

Hi @rdlauer,
Thank you for your issue.
Actually, it is possible to style those components via CSS. However there is different syntax for setting them. I am attaching sample code:

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">

    <StackLayout class="p-20">
        <SearchBar id="searchBar" hint="Search" text="" clear="onClear" submit="onSubmit" />
        <SegmentedBar selectedIndex="0">
                                <SegmentedBar.items>
                                    <SegmentedBarItem title="First" />
                                    <SegmentedBarItem title="Second" />
                                    <SegmentedBarItem title="Third" />
                                </SegmentedBar.items>
                            </SegmentedBar>
        <GridLayout> 
            <TabView id="tabViewContainer">
                <TabView.items>
                    <TabViewItem title="Tab 1">
                        <TabViewItem.view>
                            <GridLayout>
                                <ListView items="{{ source }}"  loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
                                    <ListView.itemTemplate>
                                        <StackLayout backgroundColor="red">
                                            <Label text="{{title}}" textWrap="true" />
                                        </StackLayout>
                                    </ListView.itemTemplate>
                                </ListView>
                            </GridLayout>
                        </TabViewItem.view>
                    </TabViewItem>
                    <TabViewItem title="Tab 2">
                        <TabViewItem.view>
                            <Label text="This is Label in Tab 2" />
                        </TabViewItem.view>
                    </TabViewItem>
                </TabView.items>
            </TabView> 
        </GridLayout>
    </StackLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {

    let page = <Page>args.object;
    var array=[{title:"title1"}, {title:"title2"}, {title:"title3"}, {title:"title4"}, {title:"title5"}];

    page.bindingContext = {source:array};
}

app.css

TabView{
    tab-background-color:red;
    selected-tab-text-color:green;
}
SegmentedBar{
    selected-background-color:yellow;
    font-size: 25;
    background-color: red
}
SearchBar{
    color:blue;
    background-color:green;
}

ListView{
    background-color: red;    
}

About the SearchBar, could you give us some more info for the properties you would like to style for this component.

Regards,
@tsonevn

tsonevn on 6 Dec 2016

Ah, fantastic. I didn't realize those non-standard properties could be used in CSS. Very helpful!

Just a few follow up questions/comments;

selectedTextColor is not a property listed in the SegmentedBar docs
The more I look at SearchBar and the differences between the iOS and Android implementations, the less I think that styling them is useful. Maybe the grey iOS background at most.
NEW: I noticed the backgroundColor of the ListView cannot be set with iOS (works fine on Android).

rdlauer on 6 Dec 2016

Regards,
@tsonevn

tsonevn on 7 Dec 2016

👍2

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