Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updated anchor links

...

In the TSS file, define attributes as key-value pairs, where the key is the name of the markup element, the class name prefixed with a period (.), or the id name prefixed with a hash tag (#) and the value is a dictionary of attributes (or Titanium class properties) to set.  You can optionally place a conditional block with the key name to apply styles under certain conditions as explained in the Platform-Specific Stylesspecific styles and Custom Query Stylesquery styles sections below.

You can use the following values and operators in your TSS file:

...

Code Block
linenumberstrue
languagecss
langcss
// Default label
"Label": { 
    backgroundColor: "#000",
    text: 'Another platform'
},
// iPhone
"Label[platform=ios formFactor=handheld]": {
    backgroundColor: "#f00",
    text: 'iPhone'
},
// iPad and iPad mini
"Label[platform=ios formFactor=tablet]": { 
    backgroundColor: "#0f0",
    text: 'iPad'
},
// Android handheld and tablet devices
"Label[platform=android]": { 
    backgroundColor: "#00f",
    text: 'Android'
},
// Any Mobile Web platform
"Label[platform=mobileweb]": {
    backgroundColor: "#f0f",
    text: 'Mobile Web'
}

Custom query styles

Since Alloy 1.4, you You can create custom queries to select which styles to apply in both the TSS and XML files.  These query statements must return a boolean value.  Custom query styles override all styles, that is, class, id, and markup element styles, except the ones defined as attributes in the XML file.

...

Example using custom properties

Starting with Alloy 1.7.6, the The application can pass custom Boolean properties to the the Alloy.createController() method. These properties can be accessed by both the XML and TSS files.  When When calling the createController() method, pass the custom Boolean properties in the second argument of the method. 

...

In the TSS file, add the conditional block and assign the if attribute to the property passed to the createController() method.  Prefix Prefix the property name with the $.args namespace.  Based on the property passed to the method, the application displays a different styled label.

...