Nativescript: [Enhancement] Ability to register custom css rules for plugins with multiple UI elements

[PeterStaev]

So in the DropDown plugin I want to add ability to define different styles for the label that shows the selected value and the popup/spinner (https://github.com/PeterStaev/NativeScript-Drop-Down/issues/44). Is there any built in way that I can achieve this? I first thought to add two separate properties that would define a class for the label and a class for the spinner, but that does not seem very right. Also from what I see there is no method that can return to me the evaluated style properties for a given css class in the current scope. Ideally I want to be able to have something like:

/* styles only the label */
.drop-down {
  background-color: red;
}
/* styles the spinner */
.drop-down>option {
  background-color: blue;
}

Then somehow "register" in my plugin that it has an inner UI control named option and then be able to use the new property system's setNative functions to style the native element of either the main widget or any secondary UI elements that widget has registered.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[PanayotCankov]

It works pretty much the way you have explained it. You can create a class Options that extends ViewBase, when the native view that will be styles is available you can instantiate Options, add it to the DropDown as child, provide the and implement Options's backgroundColor.setNative. If there is no suitable native view which you can provide in Options's createNativeView, you can subscribe for the Options's instance "backgroundColorChange" event and it will fire always, even if there is no native instance.

[PeterStaev]

Thanks @PanayotCankov ! I will give your suggestion a try and post back the results :)

[PanayotCankov]

Just to drop a note here, I really like the ability to style subcomponents of native widgets, but I think the A>B should be used for things that can be found in the JavaScript visual tree (e.g. options to be a ViewBase) If we are going to need styles for sub-components that are somehow rendered by the native, I'd like us to implement an easy way to define custom pseudo elements:
https://www.w3.org/TR/css3-selectors/#pseudo-elements
This is almost the same as your suggestion:

.drop-down::option {
  background-color: blue;
}

And have the option to be somewhat lightweight element that has most of the ViewBase implementation stripped and exposing the events to the parent ViewBase.

[NickIliev]

@PeterStaev closing this one due to inactivity but do let me know if you need further assistance and I will reopen the issue.

[PeterStaev]

@NickIliev , I think this should remain open and be marked as Enhancement to implement what @PanayotCankov suggested in his last comment - to have ability for widgets to register pseudo-elements and then be able to style those. I will change title to indicate this.

[Ahnert1]

Being able to style the dropdown pop-up would be incredibly useful. Because in my situation, I really enjoy the look of the dropdown until I tap to open it up.

[JoshDSommer]

Would it be possible to add a css class to the items in the list. with either a field that we specify the name with or, just a hardcoded class name so we can target and style them with something like.ns-drop-down-item?