Angular IOS cannot set MDTabStrip{ highlight-color: red;}

[cjohn001]

Which platform(s) does your issue occur on?

• iOS
• iOS 13.5
• emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
• Cross-platform modules: "@nativescript/core": "~7.3.0",
• Runtime(s): "tns-ios": "6.5.4"
• Plugin(s): "@nativescript-community/ui-material-tabs": "^5.2.20",

Please, tell us how to recreate the issue in as much detail as possible.

I am currently trying to replace the NS7 Tabs with the ui-material-components MDTabs as I have red that this should be a dropin replacement. Unfortunately, the highlight on tab selection (on button release) and the line below the selected tab appear in violett (default color I assume) Seems like those should be set via

MDTabStrip { highlight-color: red; } This worked for the NS7 Tabs, but does not currently work for this plugin

[farfromrefug]

@cjohn001 ok strange it seems it never was a css property... will make it work EDIT: actually i read it wrong. The fact the color changed is normal. This is because now you get a much newer version of the ios native libs. To change the "violet" color you need to set the theme colors Here is a Vue example https://github.com/nativescript-community/ui-material-components/blob/3835976ff6cd4f150b04e98691a1020aad3c2c7d/demo-vue/app/main.ts#L46

I will update the doc for it to be more clear

[cjohn001]

@cjohn001 ok strange it seems it never was a css property... will make it work EDIT: actually i read it wrong. The fact the color changed is normal. This is because now you get a much newer version of the ios native libs. To change the "violet" color you need to set the theme colors Here is a Vue example

https://github.com/nativescript-community/ui-material-components/blob/3835976ff6cd4f150b04e98691a1020aad3c2c7d/demo-vue/app/main.ts#L46

I will update the doc for it to be more clear

@farfromrefug Thank you very much for the info. Not sure if I understood you correctly. You will add a CSS property for it? Meanwhil, as I am using Angular. The themer in your code example. Is this a global variable and would I have to set it up when starting the app? Or could I set it locally in the Angular component? Or onLoaded of the MDTabs?

[cjohn001]

By the way: Would be great if you could also update the documentation for the CSS attributes that work with the plugin. The documentation for the tabs component seems outdated. For me the following attributes are working:

MDTabStrip { selected-item-color: $heading-text-color; un-selected-item-color: $dark-grey-text-color; highlight-color: red; // this does not work yet background-color: white; }

MDTabContentItem { background: red; }

[farfromrefug]

@cjohn001 Ok so yes for the themer (used only on iOS as on Android it is set through the theme xml) you only need to set it once on app start. It is the equivalent of setting it in your style.xml on Android. As for the css property. Yes i will make highlightColor work in css through highlight-color. I dont know why it was in the doc as css as it was never implemented that way.

[farfromrefug]

@cjohn001 are you sure selected-item-color , un-selected-item-color work? they should not!

[cjohn001]

@cjohn001 Ok so yes for the themer (used only on iOS as on Android it is set through the theme xml) you only need to set it once on app start. It is the equivalent of setting it in your style.xml on Android. As for the css property. Yes i will make highlightColor work in css through highlight-color. I dont know why it was in the doc as css as it was never implemented that way.

Great. Thank your very much!

[cjohn001]

@cjohn001 are you sure selected-item-color , un-selected-item-color work? they should not!

@farfromrefug : Yes they work for me. For me the NS plugins are unfortunately still black magic. But should those values not work due to the code here?

https://github.com/nativescript-community/ui-material-components/blob/master/src/core/tab-navigation-base/tab-strip/index.ts

export const highlightColorProperty = new Property<TabStrip, Color>({ name: 'highlightColor', equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); export const selectedItemColorProperty = new Property<TabStrip, Color>({ name: 'selectedItemColor', equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); export const unSelectedItemColorProperty = new Property<TabStrip, Color>({ name: 'unSelectedItemColor', equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });

[farfromrefug]

@cjohn001 yes but as they are defined they DO NOT support css properties. Are you sure you dont define them in your templates too ?

[cjohn001]

@cjohn001 yes but as they are defined they DO NOT support css properties. Are you sure you dont define them in your templates too ?

@farfromrefug : I unfortunately do not know how I could define them in my templates. The only related code I have, is in the scss file of the component using MDTabs. It is the scss code given below. But this just configures the component.

MDTabStrip { selected-item-color: $heading-text-color; un-selected-item-color: $dark-grey-text-color; highlight-color: red; background-color: white; }

MDTabContentItem { background: transparent; }

I do not know how CSS properties are registered from a plugin component in general. But at the file which I referenced, you find the following lines at the very bottom:

isIconSizeFixedProperty.register(TabStrip); highlightColorProperty.register(TabStrip); selectedItemColorProperty.register(TabStrip); unSelectedItemColorProperty.register(TabStrip);

Does this maybe register the CSS?

Another idea: I am using the plugin together with NS7 which has the Tabs widget included. This uses the same CSS (TabStrip instead of MDTabStrip), might this component somehow be in conflict with MDTabs and the CSS is therefore working? I have red in the release notes for NS8 that MDTabs would be a plugin replacement for the NS7 tabs component. Therefore, I assume it might be related.

[farfromrefug]

@cjohn001 i dont get why it work for you :) eill try and run some tests when i have the time

[rayneram]

Just to note that the undocumented selected-item-color and un-selected-item-color css properties work for me too and are the only reliable way I can get these colours to work consistently on both ios and android. (Without them, android set up the colours correctly initially, but then seemed to get confused as the items were selected, applying the selected and unselected colours the wrong way around.)

NS 8.0, Plugin 5.2.31

[cjohn001]

@farfromrefug: I am wondering, is there any update on the issue available?

[farfromrefug]

@cjohn001 i am a bit lost in this issue now seeing the discussions we had here. What s the remaining issue here?

[cjohn001]

@farfromrefug:

MDTabStrip { highlight-color: red; }

Highlight color is now also working for me. I have one last question before closing the issue. The ripple effect when selecting a tab uses the themer.setPrimaryColor(). Is there also a CSS option available which I could use to set it with angular?

[farfromrefug]

@cjohn001 ripple-color should work for MDTabStrip. could you try ?

[cjohn001]

@farfromrefug : Thanks a lot. Yes ripple-color is working. Great!