Feature Request: Improved TabView CSS Support

[sitefinitysteve]

Tabs Need:

• CSS: highlighted (for selected tab... selectedColor exists as XML property, but needs to support one of the new pseudos
• Styler: Android tab text needs to match $accent, could be styled in the above "highlighted" class with "color"? Right now selectedColor xml prop doesn't change it though.
• CSS: text-transform uppercase
• Core: Okay so here's the conundrum... we have "selectedColor" and "tabsBackgroundColor" as xml properties. Both require a color code in the XML, I need these to be somehow in the css. The problem is "background-color" of TabView changes the TabView CONTENT AREA not the tabs themselves. So what about this idea... (below)

.tab-view.TabViewItem{
   background-color: red;

  &:highlighted{
     background-color: blue;
  }
}

It would keep the colors out of the XML and give me more flexability, also "color" on TabView also changes the tab content area, which is problematic :/

[seadag86]

+1

[echap]

Same request here !

[hamorphis]

@sitefinitysteve One of the main obstacles to styling the individual tabs with pseudo classes is that the tabs are not UI views in our view hierarchy. The TabViewItem interface simply specifies some information about the tab:

    /**
     * Represents a tab view entry.
     */
    class TabViewItem extends bindable.Bindable {
        /**
         * Gets or sets the title of the TabViewItem.
         */
        public title: string;

        /**
         * Gets or sets the view of the TabViewItem.
         */
        public view: view.View;

        /**
         * Gets or sets the icon source of the TabViewItem. This could either be a a file name or resource id.
         */
        public iconSource: string;
    }

So for example, when you set TabView.selectedColor to something, here is what happens on Android:

function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var tabLayout = (<TabView>data.object)._getAndroidTabView();
    if (tabLayout && data.newValue instanceof color.Color) {
        tabLayout.setSelectedIndicatorColors([data.newValue.android]);
    }
}

So it will be very difficult to use the pseudo class approach for TabViewItems.

So I think to implement the following css:

TabView {
    highlighted-color: yellow;
    tab-background: blue;
}

What do you think?

[hamorphis]

@sitefinitysteve Regarding the Android tab text, do you want the text of the selected tab to match the color of the horizontal line below it? Or you want to change the text color of all tabs? In other words, given the following CSS:

TabView {
    highlighted-color: yellow;
    tab-background: blue;
}

You want the text of the selected tab (Item 1) to be yellow, right?

[hamorphis]

And another question. Do you need to be able to specify a different background color for the selected tab only? Currently you can only change the highlight, i.e. text color on iOS and the horizontal line color on Android.

[sitefinitysteve]

Can we get @myninka to comment in on the requirements for colors?

I basically just need the flexibility to implement the theme, but since we're here it would be great to allow users freedom to do whatever they need.

Re: Css properties: I mean those are non-standard, thats why I was throwing about the pseudo idea. I'm personally fine with that as long as it's documented and not lost in the void, but what is the discussion over there, everyone cool with it?

[myninka]

We have discussed this with @hamorphis and agreed css should set the following:

1. the background color of the whole tabview
2. the foreground (text) color of the whole tabview
3. the selected tab text color
4. the highlight of the selected tab in Android
   I think this will be enough to implement the design of the theme. If we find out a way to overcome the limitations of the tabview listed above we will develop more flexible approach to the styling.

[sitefinitysteve]

👍 Thanks @hamorphis @myninka !

[hamorphis]

I am currently working on implementing these:

TabView {
    tab-text-color: green;
    tab-background-color: yellow;
    selected-tab-text-color: white;
    android-selected-tab-highlight-color: orange;
}

I tried to implement selected-tab-background-color, but it is quite hard. On iOS I need to hack the internals of the control and I read that this can ban the app on the AppStore. On Android the individual tabs are not stretched to occupy the full height of the TabStrip and if I change the background of only one it looks ugly. So to achieve this on Android I would have to hack the Android control as well. So for now I don't think we will support selected-tab-background-color.

The Rich UI TabView will have those capabilities though.

[sitefinitysteve]

@hamorphis By Rich UI TabView do you mean the TelerikUI for NS package?

[hamorphis]

@sitefinitysteve Yes.

[hamorphis]

Here is what the following CSS will produce.

TabView {
    tab-text-color: green;
    tab-background-color: yellow;
    selected-tab-text-color: red;
    android-selected-tab-highlight-color: orange;
}

[hamorphis]

@sitefinitysteve, @myninka I have created a pull request.

[sitefinitysteve]

Thx @hamorphis people are gonna love this

[hamorphis]

IMPORTANT

• selectedColor property is now deprecated. Use selected-tab-text-color for iOS and selected-tab-text-color and/or android-selected-tab-highlight-color (the horizontal line) for Android.
• tabsBackgroundColor property is now deprecated. Use the new tab-background-color CSS property instead.
• Using the two deprecated props from XML will keep the original behavior, i.e. there are not breaking changes, but is suggested to migrate to the new properties, since we will kill the old ones in a couple of releases.
• Setting CSS color on the TabView in order to color the text of its tab titles no longer works like before, because it was colorizing absolutely everything that had text inside the TabView. Use the new CSS property tab-text-color -- it will color only the titles of the tabs and nothing inside the TabView.

All CSS properties have their respective properties on the TabView class so you can set them from XML and/or code-behind:
tab-view.d.ts

/**
         * Gets or sets the text color of the tabs titles.
         */
        tabTextColor: color.Color;

        /**
         * Gets or sets the background color of the tabs.
         */
        tabBackgroundColor: color.Color;

        /**
         * Gets or sets the text color of the selected tab title.
         */
        selectedTabTextColor: color.Color;

        /**
         * Gets or sets the color of the horizontal line drawn below the currently selected tab on Android.
         */
        androidSelectedTabHighlightColor: color.Color;

        /**
         * Gets or sets the text transform of the tab titles. 
         */
        textTransform: string;

[EricRobertBrewer]

If SegmentedBar is a TabHost, then why doesn't SegmentedBar have these properties?

A SegmentedBar only has the selectedBackgroundColor property, which only changes the color of the tab highlight.

SO answer by @NickIliev

The thing is that Segmented bar and selectedbackgroundColor will behave as the native components would. In this case for iOS, the selectedbackgroundColor will change the color of the tapped bar. However, for Android, the selectedbackgroundColor will only change the color of the underline for the tapped bar.

[Habeeb-mohamed]

For tab view with tabitem->iconsource, tabTextColor is not applying to icon. But selectedTabTextColor applied to icon properly

[carrbrpoa]

Is it possible to change TabView's Item height?

[hackerunet]

I Want to remove the shadow bellow the title tabs...how can I remove that?

[kspearrin]

I'm also looking for a way to control the tabview height, or at least reduce the vertical padding somewhat.

[AtoianAvetik]

Can someone please help me. I want to change on android tab highlight height. How I can do it?