Nativescript: How to style Tabview text color?

[vekexasia]

Hello,

Is there any chance/cssselector i could use to style the textcolor of a tabview? (Both: selected and non-selected)

[NickIliev]

You can use the tab-view properties like _color_, _selectedColor_, _tabsBackgroundColor_ to change the appearance of your tab-view.
More about the properties you can find at the API reference link.

[vekexasia]

@NickIliev there's no such color. Plus what I'm looking for is the "text" color of the title in the tabs.

[NickIliev]

You can use _color_ to set the text color for your entire tab-view (including the tab title) and from there if you want you content to have different text color you can apply further CSS for your inner content.

For example:

<TabView id="tabViewContainer"  color="{{ isSelected ? 'red' : 'blue' }}" >

In your view model you can use the boolean isSelected to change the color depending on _selectedIndex_ property. A complete explanation for a similar scenario is described in this blog post.

[vekexasia]

My fault, the color attribute is there but it is used to colorize the
Labels within the tab, not the tab titles itself.

On Mon, Aug 15, 2016 at 1:55 PM, Nick Iliev [email protected]
wrote:

You can use _color
https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview.html#color_
to set the text color for your entire tab-view (including the tab title)
and from there if you want you content to have different text color you can
apply further CSS for your inner content.

For example:

In your view model you can use the boolean isThisTabSelected to change the
color depending on _selectedIndex_ property. Complete explanation for
similar scenario is described in this blog post

.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/NativeScript/issues/2585#issuecomment-239785384,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAMPS-YJFQiM8sWB5S8k5EhbZksEiRMqks5qgFOxgaJpZM4JkSiX
.

Andrea Baccega
[image: Email][email protected]
[image: Hangouts][email protected]
[image: Personal site] http://www.andreabaccega.com/ [image: Linkedin
Profile] http://it.linkedin.com/in/andreabaccega [image: Facebook]
https://www.facebook.com/andrea.baccega [image: Google+]
https://plus.google.com/109217393200753135791 [image: Twitter]
http://twitter.com/veke87 [image: StackOverflow]
http://stackoverflow.com/users/314407/andrea-baccega [image: GitHub]
https://github.com/vekexasia

[NickIliev]

It will apply color to the title and to all the ttext in content of the tabs. So you migh want to use it to define your tabs titles colors and from there to explicitly set the styles for the content inside (labels,text-views, ect.)
Here is an visual example:

<TabView id="tabViewContainer" color="orange" selectedColor="green">
    <TabView.items>
        <TabViewItem title="Tab 1">
            <TabViewItem.view>
                <Label text="This is Label in Tab 1" />
            </TabViewItem.view>
        </TabViewItem>
        <TabViewItem title="Tab 2">
            <TabViewItem.view>
                <Label text="This is Label in Tab 2" />
            </TabViewItem.view>
        </TabViewItem>
    </TabView.items>
</TabView>

note: currently selectedColor for Android will only change the tabs-indicator (the bottom line on the selected tab)

[danazkari]

Hi, I'm using NG2 and according to https://docs.nativescript.org/cookbook/tab-view-ng, the template is a bit different, but just about enough so that changing the color property in TabView, doesn't affect each TabView title, but only their content.

Is there another way if I'm using NG2? There's nothing much documented elsewhere.

[9thwall]

Hi, I'm having the same issue.
I added color like <TabView color="orange" selectedColor="green">
but this does not alter the tab title color. They stay black and I have a darker theme going so my tab titles are almost invisible. Is there another way of making this happen for NG2?

[tsonevn]

Hi @9thwall,
Thank you for reporting the problem
I confirm that this is a real problem, while setting itemsTab text color for NativeScript Angular2. Regarding to that the problem has been fix with the upcoming NativeScript release and with introducing the new TabView style properties. About the new TabView properties you could review issue #2738 To be able to use them in your project you could install @next modules in your project. How to do that you could review in the below described steps.

1. tns plugin remove tns-core-modules
2. tns plugin add tns-core-modules@next
3. delete platforms node_modules hooks folders.
4. tns run <platform_name>

[felipemullen]

some of the comments here are old, so I am going to share the current tab properties that appear to be working for me (nativescript 3.2.0)

(see documentation)

xml view

<TabView.items>
    <TabViewItem title="Feed">
        <TabViewItem.view>
            <Label text="activity feed" />
        </TabViewItem.view>
    </TabViewItem>
    <TabViewItem title="Search">
        <TabViewItem.view>
            <Label text="search view" />
        </TabViewItem.view>
    </TabViewItem>
</TabView.items>

CSS styles

TabView {
    tab-text-color: #7edabb;
    selected-tab-text-color: rgb(255, 255, 255);
    tab-background-color: #39af8a;
    android-selected-tab-highlight-color: #185a9d;
}

TabViewItem {
    font-size: 20;
}

[Obapelumi]

This worked for me thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.