Styles on the fly


#1

Hello,

Is it possible to change styles dynamically?

For example if I tap a button can the tap action change the color of other items on the view?

What about just styles?

I found this page in the docs: https://docs.nativescript.org/ui/styling

and tried doing something like this but I get a dd.assCss is not a function error:

var page = args.object;

  dd = page.getViewById("gender");

  dd.addCss("{background-color: blue}");

#2

I think it’s just dd.cssClass to apply a class name, or just dd.style to change the style property.


#3

not sure this, assCss @randy :laughing: wrong API

All view components API: https://docs.nativescript.org/api-reference/classes/ui_core_view.view.html so like @sitefinitysteve mentioned cssClass will work. There is a good plugin for doing things like this with methods to match DOM specific methods so easier to get going if you’re a web dev https://github.com/NathanaelA/nativescript-dom#viewclasslistaddclassname-classname-


#4

@randy

For all my development I use a couple open source plugins that I developed.
First is nativescript-dom; this gives you things like getElementById, getElementByTagName, getElementByClassName, and also gives you the awesomly cool .classList ability to do things like add/remove or toggle a style on any item in your view at any point in time. So you might see in my code base; getElementById("someErrorLabel").classList.toggle("hidden", [SOME EXPRESSION]); and so then the hidden class will be toggled on or off based on some expression.

The other plugins are NativeScript-orientation which adds the .landscape tag to the css system, basically when you switch to landscape; then automatically any rules that start with .landscape are used. (i.e.:

.myLabel {
  color: green;
}
.landscape .myLabel {
  color: red;
}

This comes in very handy to make the screen change any css needed when the screen orientation changes.

And the final CSS related plugin I use is nativescript-platform-css; this plugin adds the ability to have .ios and .android prefixes inside your css; so that you can have specific rules per platform in your css file. It also adds .ios320, .ios360, ios768, etc (& android versions) to the list to allow you to even have specific rules based on the width of the screen (kinda a media query type system)