purgetss
Version:
A package that simplifies mobile app creation for Titanium developers.
837 lines (739 loc) • 31.5 kB
Markdown
# What's new in v5.1.0
- [What's new in v5.1.0](#whats-new-in-v510)
- [Breaking changes](#breaking-changes)
- [Removed several icon libraries](#removed-several-icon-libraries)
- [Instructions to recreate any of the deleted libraries](#instructions-to-recreate-any-of-the-deleted-libraries)
- [1. Start by downloading them from their official websites:](#1-start-by-downloading-them-from-their-official-websites)
- [2. Put the desired libraries in `./purgetss/fonts` folder](#2-put-the-desired-libraries-in-purgetssfonts-folder)
- [3. Run the `build-fonts` command](#3-run-the-build-fonts-command)
- [New Features](#new-features)
- [Unused or unsupported classes](#unused-or-unsupported-classes)
- [New classes for the following properties](#new-classes-for-the-following-properties)
- [Ti.Android.ActionBar](#tiandroidactionbar)
- [displayHomeAsUp](#displayhomeasup)
- [homeButtonEnabled](#homebuttonenabled)
- [Ti.Android.Activity](#tiandroidactivity)
- [requestOrientation](#requestorientation)
- [Ti.UI.Android.DrawerLayout](#tiuiandroiddrawerlayout)
- [drawerIndicatorEnabled](#drawerindicatorenabled)
- [drawerLockMode](#drawerlockmode)
- [leftDrawerLockMode](#leftdrawerlockmode)
- [leftWidth](#leftwidth)
- [rightDrawerLockMode](#rightdrawerlockmode)
- [rightWidth](#rightwidth)
- [toolbarEnabled](#toolbarenabled)
- [Ti.UI.Android.ProgressIndicator](#tiuiandroidprogressindicator)
- [cancelable](#cancelable)
- [canceledOnTouchOutside](#canceledontouchoutside)
- [location](#location)
- [type](#type)
- [Ti.UI.Animation](#tiuianimation)
- [transition](#transition)
- [Ti.UI.Button](#tiuibutton)
- [enabled](#enabled)
- [style](#style)
- [Ti.UI.Window](#tiuiwindow)
- [autoAdjustScrollViewInsets](#autoadjustscrollviewinsets)
- [hidesBackButton](#hidesbackbutton)
- [hidesBarsOnSwipe](#hidesbarsonswipe)
- [hidesBarsOnTap](#hidesbarsontap)
- [hidesBarsWhenKeyboardAppears](#hidesbarswhenkeyboardappears)
- [hidesSearchBarWhenScrolling](#hidessearchbarwhenscrolling)
- [homeIndicatorAutoHidden](#homeindicatorautohidden)
- [statusBarStyle](#statusbarstyle)
- [Ti.UI.DashboardItem](#tiuidashboarditem)
- [canDelete](#candelete)
- [html](#html)
- [Ti.UI.DashboardView](#tiuidashboardview)
- [columnCount](#columncount)
- [rowCount](#rowcount)
- [wobble](#wobble)
- [Ti.UI.SearchBar](#tiuisearchbar)
- [selectedButtonColor](#selectedbuttoncolor)
- [selectedTextColor](#selectedtextcolor)
- [showBookmark](#showbookmark)
- [Ti.UI.ImageView. Ti.UI.WebView](#tiuiimageview-tiuiwebview)
- [enableZoomControls](#enablezoomcontrols)
- [hires](#hires)
- [systemButton](#systembutton)
- [Ti.UI.ListView, Ti.UI.TableView](#tiuilistview-tiuitableview)
- [separatorStyle](#separatorstyle)
- [showSearchBarInNavBar](#showsearchbarinnavbar)
- [style property](#style-property)
- [Ti.UI.AlertDialog](#tiuialertdialog)
- [Ti.UI.ListView](#tiuilistview)
- [Ti.UI.iOS.PreviewAction, Ti.UI.iOS.PreviewActionGroup](#tiuiiospreviewaction-tiuiiospreviewactiongroup)
- [Ti.UI.ProgressBar](#tiuiprogressbar)
- [Ti.UI.Switch](#tiuiswitch)
- [Ti.UI.TableView](#tiuitableview)
- [Ti.UI.TabGroup](#tiuitabgroup)
- [Multiple components](#multiple-components)
- [accessibilityHidden](#accessibilityhidden)
- [disableBounce](#disablebounce)
- [submitEnabled](#submitenabled)
- [iconified](#iconified)
- [iconifiedByDefault](#iconifiedbydefault)
- [scrollIndicatorStyle](#scrollindicatorstyle)
- [scrollsToTop](#scrollstotop)
- [selectedColor](#selectedcolor)
- [selectionStyle](#selectionstyle)
- [touchFeedback](#touchfeedback)
## Breaking changes
**This is the LAST MAJOR VERSION UPDATE ( read: incompatible API changes ), within the next 6 months, to focus our attention on enhancements and bug fixes in a backwards compatible manner!!**
### Removed several icon libraries
We've decided to remove several icon libraries and leave only the `Font Awesome 6 Free`, `Material Icons` icons and `Framework 7` icons, as the official icon fonts for **Purge TSS**.
### Instructions to recreate any of the deleted libraries
You can still use them by creating your own custom `fonts` file.
#### 1. Start by downloading them from their official websites:
- [Bootstrap Icons](https://icons.getbootstrap.com)
- [Boxicons](https://boxicons.com)
- [LineIcons](https://lineicons.com/icons/?type=free)
- [Tabler Icons](https://tabler-icons.io)
#### 2. Put the desired libraries in `./purgetss/fonts` folder
You'll need to copy just the TrueType OR OpenType font files and the `.css` file.
```bash
# Root of the project
purgetss
└─ fonts
└─ boxicons
├─ boxicons.css
└─ boxicons.ttf
└─ lineicons
├─ lineicons.css
└─ lineicons.ttf
```
#### 3. Run the `build-fonts` command
Run the following command to create your custom `fonts.tss` file.
```bash
$ purgetss build-fonts [--modules]
# alias:
$ purgetss bf [-m]
```
- **It will generate a custom `./purgetss/fonts.tss` file with all the unicode characters and style rules:**
```css
// ./purgetss/fonts.tss
'.boxicons': { font: { fontFamily: 'boxicons' } }
'.lineicons': { font: { fontFamily: 'LineIcons' } }
// Unicode Characters
// To use your Icon Fonts in Buttons AND Labels each class sets 'text' and 'title' properties
// boxicons.css
'.bxl-meta': { text: '\uef27', title: '\uef27' }
'.bx-lemon': { text: '\uef28', title: '\uef28' }
'.bxs-lemon': { text: '\uef29', title: '\uef29' }
// ...
// lineicons.css
'.lni-500px': { text: '\uea03', title: '\uea03' }
'.lni-add-files': { text: '\uea01', title: '\uea01' }
'.lni-adobe': { text: '\uea06', title: '\uea06' }
// ...
```
- **Purge TSS will use the font's file name as the style rule name. You can change it by renaming the fonts file name**.
```bash
# Root of the project
purgetss
└─ fonts
└─ boxicons
├─ bx.ttf
```
New style rule name: `'.bx'`
```css
// new style rule name
'.bx': { font: { fontFamily: 'boxicons' } }
```
- **It will copy the font files to `./app/assets/fonts` folder and renaming them to their corresponding PostScript name to work on both iOS and Android Apps:**
```bash
# ./app/assets/fonts
app
└─ assets
└─ fonts
├─ boxicons.ttf
└─ LineIcons.ttf
```
- **And when using the `--modules` option, it will generate a `./app/lib/purgetss.fonts.js` CommonJS module file:**
```javascript
// ./app/lib/purgetss.fonts.js
const icons = {
// boxicons
'boxicons': {
'bxlMeta': '\uef27',
'bxLemon': '\uef28',
'bxsLemon': '\uef29',
// ...
},
// lineicons
'lni': {
'500px': '\uea03',
'addFiles': '\uea01',
'adobe': '\uea06',
// ...
}
};
exports.icons = icons;
```
- **Purge TSS will automatically try to guess the prefix for each group of icons.**
If it can't guess it or there is none, it will use the `.css` file name as the prefix. **You can change it by renaming the file**.
```bash
# Root of the project
purgetss
└─ fonts
└─ boxicons
├─ bx.css
```
New group prefix: `bx`
```javascript
const icons = {
// bx
// New group prefix
'bx': {
// ...
},
// ...
};
exports.icons = icons;
```
- **Remember that you can add any Serif, Sans-Serif, Cursive, Fantasy or Monospace font families to your custom `fonts` file, by copying the TrueType and OpenType fonts into the `./purgetss/fonts` folder.**
```bash
# Root of the project
purgetss
└─ fonts
└─ bevan
├─ Bevan-Italic.ttf
└─ Bevan-Regular.ttf
└─ roboto
├─ Roboto-Regular.ttf
...
```
This will generate the corresponding style rules and `fontFamily` properties for each font file.
```css
'.bevan-italic': { font: { fontFamily: 'Bevan-Italic' } }
'.bevan-regular': { font: { fontFamily: 'Bevan-Regular' } }
'.roboto-regular': { font: { fontFamily: 'Roboto-Regular' } }
```
And by renaming the font file you can customize the style rule name.
```bash
# Root of the project
purgetss
└─ fonts
└─ roboto
├─ font-sans.ttf
...
```
```css
'.font-sans': { font: { fontFamily: 'Roboto-Regular' } }
```
## New Features
### Unused or unsupported classes
Now **Purge TSS** includes any unused or unsupported classes in `app.tss`, so you can create, fix or remove them from your XML files.
```xml
<Alloy>
<Window>
<View class="vertical">
<Label class="font-semibold text-black" text="Character Name" />
<Label class="my-forgotten-or-misspelled-class" text="Character's Title" />
</View>
</Window>
</Alloy>
```
```css
// Main styles
// ...
// Unused or unsupported classes
'.my-forgotten-or-misspelled-class': { }
```
## New classes for the following properties
### Ti.Android.ActionBar
#### displayHomeAsUp
```css
// Component(s): Ti.Android.ActionBar
// Property(ies): displayHomeAsUp - Android Only
'.display-home-as-up[platform=android]': { displayHomeAsUp: true }
'.dont-display-home-as-up[platform=android]': { displayHomeAsUp: false }
```
#### homeButtonEnabled
```css
// Component(s): Ti.Android.ActionBar
// Property(ies): homeButtonEnabled - Android Only
'.home-button-enabled[platform=android]': { homeButtonEnabled: true }
'.home-button-disabled[platform=android]': { homeButtonEnabled: false }
```
### Ti.Android.Activity
#### requestOrientation
```css
// Component(s): Ti.Android.Activity
// Property(ies): requestOrientation - Android Only
'.request-orientation-behind[platform=android]': { requestOrientation: Ti.Android.SCREEN_ORIENTATION_BEHIND }
'.request-orientation-landscape[platform=android]': { requestOrientation: Ti.Android.SCREEN_ORIENTATION_LANDSCAPE }
'.request-orientation-nosensor[platform=android]': { requestOrientation: Ti.Android.SCREEN_ORIENTATION_NOSENSOR }
'.request-orientation-portrait[platform=android]': { requestOrientation: Ti.Android.SCREEN_ORIENTATION_PORTRAIT }
'.request-orientation-sensor[platform=android]': { requestOrientation: Ti.Android.SCREEN_ORIENTATION_SENSOR }
'.request-orientation-unspecified[platform=android]': { requestOrientation: Ti.Android.SCREEN_ORIENTATION_UNSPECIFIED }
'.request-orientation-user[platform=android]': { requestOrientation: Ti.Android.SCREEN_ORIENTATION_USER }
```
### Ti.UI.Android.DrawerLayout
#### drawerIndicatorEnabled
```css
// Component(s): Ti.UI.Android.DrawerLayout
// Property(ies): drawerIndicatorEnabled - Android Only
'.drawer-indicator-enabled[platform=android]': { drawerIndicatorEnabled: true }
'.drawer-indicator-disabled[platform=android]': { drawerIndicatorEnabled: false }
```
#### drawerLockMode
```css
// Component(s): Ti.UI.Android.DrawerLayout
// Property(ies): drawerLockMode - Android Only
'.drawer-lock-mode-locked-closed[platform=android]': { drawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED }
'.drawer-lock-mode-locked-open[platform=android]': { drawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_OPEN }
'.drawer-lock-mode-undefined[platform=android]': { drawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_UNDEFINED }
'.drawer-lock-mode-unlocked[platform=android]': { drawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_UNLOCKED }
```
#### leftDrawerLockMode
```css
// Component(s): Ti.UI.Android.DrawerLayout
// Property(ies): leftDrawerLockMode - Android Only
'.left-drawer-lock-mode-locked-closed[platform=android]': { leftDrawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED }
'.left-drawer-lock-mode-locked-open[platform=android]': { leftDrawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_OPEN }
'.left-drawer-lock-mode-undefined[platform=android]': { leftDrawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_UNDEFINED }
'.left-drawer-lock-mode-unlocked[platform=android]': { leftDrawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_UNLOCKED }
```
#### leftWidth
```css
// Component(s): Ti.UI.Android.DrawerLayout
// Property(ies): leftWidth - Android Only
'.left-w-0[platform=android]': { leftWidth: 0 }
'.left-w-1[platform=android]': { leftWidth: 4 }
'.left-w-2[platform=android]': { leftWidth: 8 }
'.left-w-3[platform=android]': { leftWidth: 12 }
'.left-w-4[platform=android]': { leftWidth: 16 }
'.left-w-5[platform=android]': { leftWidth: 20 }
// ...
```
#### rightDrawerLockMode
```css
// Component(s): Ti.UI.Android.DrawerLayout
// Property(ies): rightDrawerLockMode - Android Only
'.right-drawer-lock-mode-locked-closed[platform=android]': { rightDrawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED }
'.right-drawer-lock-mode-locked-open[platform=android]': { rightDrawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_OPEN }
'.right-drawer-lock-mode-undefined[platform=android]': { rightDrawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_UNDEFINED }
'.right-drawer-lock-mode-unlocked[platform=android]': { rightDrawerLockMode: Ti.UI.Android.DrawerLayout.LOCK_MODE_UNLOCKED }
```
#### rightWidth
```css
// Component(s): Ti.UI.Android.DrawerLayout
// Property(ies): rightWidth - Android Only
'.right-w-0[platform=android]': { rightWidth: 0 }
'.right-w-1[platform=android]': { rightWidth: 4 }
'.right-w-2[platform=android]': { rightWidth: 8 }
'.right-w-3[platform=android]': { rightWidth: 12 }
'.right-w-4[platform=android]': { rightWidth: 16 }
'.right-w-5[platform=android]': { rightWidth: 20 }
// ...
```
#### toolbarEnabled
```css
// Component(s): Ti.UI.Android.DrawerLayout
// Property(ies): toolbarEnabled - Android Only
'.toolbar-enabled[platform=android]': { toolbarEnabled: true }
'.toolbar-disabled[platform=android]': { toolbarEnabled: false }
```
### Ti.UI.Android.ProgressIndicator
#### cancelable
```css
// Component(s): Ti.UI.Android.ProgressIndicator
// Property(ies): cancelable - Android Only
'.cancelable[platform=android]': { cancelable: true }
```
#### canceledOnTouchOutside
```css
// Component(s): Ti.UI.Android.ProgressIndicator
// Property(ies): canceledOnTouchOutside - Android Only
'.canceled-on-touch-outside[platform=android]': { canceledOnTouchOutside: true }
```
#### location
```css
// Component(s): Ti.UI.Android.ProgressIndicator
// Property(ies): location - Android Only
'.location-dialog[platform=android]': { location: Ti.UI.Android.PROGRESS_INDICATOR_DIALOG }
'.location-statur-bar[platform=android]': { location: Ti.UI.Android.PROGRESS_INDICATOR_STATUS_BAR }
```
#### type
```css
// Component(s): Ti.UI.Android.ProgressIndicator
// Property(ies): type - Android Only
'.type-determinant[platform=android]': { type: Ti.UI.Android.PROGRESS_INDICATOR_DETERMINANT }
'.type-indeterminant[platform=android]': { type: Ti.UI.Android.PROGRESS_INDICATOR_INDETERMINANT }
```
### Ti.UI.Animation
#### transition
```css
// Component(s): Ti.UI.Animation
// Property(ies): transition - iOS Only
'.animation-style-curl-down[platform=ios]': { transition: Ti.UI.iOS.AnimationStyle.CURL_DOWN }
'.animation-style-curl-up[platform=ios]': { transition: Ti.UI.iOS.AnimationStyle.CURL_UP }
'.animation-style-flip-from-left[platform=ios]': { transition: Ti.UI.iOS.AnimationStyle.FLIP_FROM_LEFT }
'.animation-style-flip-from-right[platform=ios]': { transition: Ti.UI.iOS.AnimationStyle.FLIP_FROM_RIGHT }
'.animation-style-flip-from-top[platform=ios]': { transition: Ti.UI.iOS.AnimationStyle.FLIP_FROM_TOP }
'.animation-style-flip-from-bottom[platform=ios]': { transition: Ti.UI.iOS.AnimationStyle.FLIP_FROM_BOTTOM }
'.animation-style-cross-dissolve[platform=ios]': { transition: Ti.UI.iOS.AnimationStyle.CROSS_DISSOLVE }
'.animation-style-none[platform=ios]': { transition: Ti.UI.iOS.AnimationStyle.NONE }
```
### Ti.UI.Button
#### enabled
```css
// Component(s): Ti.UI.Button
// Property(ies): enabled - Android Only
'.enabled[platform=android]': { enabled: true }
'.disabled[platform=android]': { enabled: false }
```
#### style
```css
// Component(s): Ti.UI.Button
// Property(ies): style
'.button-style-filled': { style: Ti.UI.BUTTON_STYLE_FILLED }
'.button-style-option-negative': { style: Ti.UI.BUTTON_STYLE_OPTION_NEGATIVE }
'.button-style-option-neutral': { style: Ti.UI.BUTTON_STYLE_OPTION_NEUTRAL }
'.button-style-option-positive': { style: Ti.UI.BUTTON_STYLE_OPTION_POSITIVE }
'.button-style-outlined': { style: Ti.UI.BUTTON_STYLE_OUTLINED }
'.button-style-text': { style: Ti.UI.BUTTON_STYLE_TEXT }
```
### Ti.UI.Window
#### autoAdjustScrollViewInsets
```css
// Component(s): Ti.UI.Window
// Property(ies): autoAdjustScrollViewInsets - iOS Only
'.auto-adjust-scroll-view-inset[platform=ios]': { autoAdjustScrollViewInsets: true }
'.dont-auto-adjust-scroll-view-inset[platform=ios]': { autoAdjustScrollViewInsets: false }
```
#### hidesBackButton
```css
// Component(s): Ti.UI.Window
// Property(ies): hidesBackButton
'.hides-back-button': { hidesBackButton: true }
'.shows-back-button': { hidesBackButton: false }
```
#### hidesBarsOnSwipe
```css
// Component(s): Ti.UI.Window
// Property(ies): hidesBarsOnSwipe - iOS Only
'.hides-bars-on-swipe[platform=ios]': { hidesBarsOnSwipe: true }
'.shows-bars-on-swipe[platform=ios]': { hidesBarsOnSwipe: false }
```
#### hidesBarsOnTap
```css
// Component(s): Ti.UI.Window
// Property(ies): hidesBarsOnTap - iOS Only
'.hides-bars-on-tap[platform=ios]': { hidesBarsOnTap: true }
'.shows-bars-on-tap[platform=ios]': { hidesBarsOnTap: false }
```
#### hidesBarsWhenKeyboardAppears
```css
// Component(s): Ti.UI.Window
// Property(ies): hidesBarsWhenKeyboardAppears - iOS Only
'.hides-bars-when-keyboard-appears[platform=ios]': { hidesBarsWhenKeyboardAppears: true }
'.shows-bars-when-keyboard-appears[platform=ios]': { hidesBarsWhenKeyboardAppears: false }
```
#### hidesSearchBarWhenScrolling
```css
// Component(s): Ti.UI.Window
// Property(ies): hidesSearchBarWhenScrolling - iOS Only
'.hides-search-bar-when-scrolling[platform=ios]': { hidesSearchBarWhenScrolling: true }
'.shows-search-bar-when-scrolling[platform=ios]': { hidesSearchBarWhenScrolling: false }
```
#### homeIndicatorAutoHidden
```css
// Component(s): Ti.UI.Window
// Property(ies): homeIndicatorAutoHidden - iOS Only
'.home-indicator-auto-hidden[platform=ios]': { homeIndicatorAutoHidden: true }
'.home-indicator-always-visible[platform=ios]': { homeIndicatorAutoHidden: false }
```
#### statusBarStyle
```css
// Component(s): Ti.UI.Window
// Property(ies): statusBarStyle - iOS Only
'.status-bar[platform=ios]': { statusBarStyle: Ti.UI.iOS.StatusBar.DEFAULT }
'.status-bar-dark[platform=ios]': { statusBarStyle: Ti.UI.iOS.StatusBar.DARK_CONTENT }
'.status-bar-light[platform=ios]': { statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT }
'.status-bar-animation-fade[platform=ios]': { statusBarStyle: Ti.UI.iOS.StatusBar.ANIMATION_STYLE_FADE }
'.status-bar-animation-none[platform=ios]': { statusBarStyle: Ti.UI.iOS.StatusBar.ANIMATION_STYLE_NONE }
'.status-bar-animation-slide[platform=ios]': { statusBarStyle: Ti.UI.iOS.StatusBar.ANIMATION_STYLE_SLIDE }
```
### Ti.UI.DashboardItem
#### canDelete
```css
// Component(s): Ti.UI.DashboardItem
// Property(ies): canDelete - iOS Only
'.can-delete[platform=ios]': { canDelete: true }
'.cant-delete[platform=ios]': { canDelete: false }
```
#### html
```css
// Component(s): Ti.UI.DashboardItem
// Property(ies): html - iOS Only
'.html': { html: true }
```
### Ti.UI.DashboardView
#### columnCount
```css
// Component(s): Ti.UI.DashboardView
// Property(ies): columnCount - iOS Only
'.col-count-1[platform=ios]': { columnCount: 1 }
'.col-count-2[platform=ios]': { columnCount: 2 }
'.col-count-3[platform=ios]': { columnCount: 3 }
'.col-count-4[platform=ios]': { columnCount: 4 }
'.col-count-5[platform=ios]': { columnCount: 5 }
'.col-count-6[platform=ios]': { columnCount: 6 }
'.col-count-7[platform=ios]': { columnCount: 7 }
'.col-count-8[platform=ios]': { columnCount: 8 }
'.col-count-9[platform=ios]': { columnCount: 9 }
'.col-count-10[platform=ios]': { columnCount: 10 }
'.col-count-11[platform=ios]': { columnCount: 11 }
'.col-count-12[platform=ios]': { columnCount: 12 }
```
#### rowCount
```css
// Component(s): Ti.UI.DashboardView
// Property(ies): rowCount - iOS Only
'.row-count-1[platform=ios]': { rowCount: 1 }
'.row-count-2[platform=ios]': { rowCount: 2 }
'.row-count-3[platform=ios]': { rowCount: 3 }
'.row-count-4[platform=ios]': { rowCount: 4 }
'.row-count-5[platform=ios]': { rowCount: 5 }
'.row-count-6[platform=ios]': { rowCount: 6 }
'.row-count-7[platform=ios]': { rowCount: 7 }
'.row-count-8[platform=ios]': { rowCount: 8 }
'.row-count-9[platform=ios]': { rowCount: 9 }
'.row-count-10[platform=ios]': { rowCount: 10 }
'.row-count-11[platform=ios]': { rowCount: 11 }
'.row-count-12[platform=ios]': { rowCount: 12 }
```
#### wobble
```css
// Component(s): Ti.UI.DashboardView
// Property(ies): wobble - iOS Only
'.wobble[platform=ios]': { wobble: true }
'.dont-wobble[platform=ios]': { wobble: false }
```
### Ti.UI.SearchBar
#### selectedButtonColor
```css
// Component(s): Ti.UI.SearchBar
// Property(ies): selectedButtonColor - iOS Only
'.selected-button-transparent[platform=ios]': { selectedButtonColor: 'transparent' }
'.selected-button-black[platform=ios]': { selectedButtonColor: '#000000' }
'.selected-button-white[platform=ios]': { selectedButtonColor: '#ffffff' }
'.selected-button-slate-50[platform=ios]': { selectedButtonColor: '#f8fafc' }
'.selected-button-slate-100[platform=ios]': { selectedButtonColor: '#f1f5f9' }
// ...
```
#### selectedTextColor
```css
// Component(s): Ti.UI.SearchBar
// Property(ies): selectedTextColor - iOS Only
'.selected-text-transparent[platform=ios]': { selectedTextColor: 'transparent' }
'.selected-text-black[platform=ios]': { selectedTextColor: '#000000' }
'.selected-text-white[platform=ios]': { selectedTextColor: '#ffffff' }
'.selected-text-slate-50[platform=ios]': { selectedTextColor: '#f8fafc' }
'.selected-text-slate-100[platform=ios]': { selectedTextColor: '#f1f5f9' }
// ..
```
#### showBookmark
```css
// Component(s): Ti.UI.SearchBar
// Property(ies): showBookmark - iOS Only
'.show-bookmark[platform=ios]': { showBookmark: true }
'.hide-bookmark[platform=ios]': { showBookmark: false }
```
### Ti.UI.ImageView. Ti.UI.WebView
#### enableZoomControls
```css
// Component(s): Ti.UI.ImageView. Ti.UI.WebView
// Property(ies): enableZoomControls - Android Only
'.enable-zoom-control[platform=android]': { enableZoomControls: true }
'.disable-zoom-control[platform=android]': { enableZoomControls: false }
```
#### hires
```css
// Component(s): Ti.UI.ImageView. Ti.UI.WebView
// Property(ies): hires - iOS Only
'.hires[platform=ios]': { hires: true }
'.lowres[platform=ios]': { hires: false }
```
#### systemButton
```css
// Component(s): Ti.UI.ImageView. Ti.UI.WebView
// Property(ies): systemButton - iOS Only
'.system-button-action[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.ACTION }
'.system-button-activity[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.ACTIVITY }
'.system-button-add[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.ADD }
'.system-button-bookmarks[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.BOOKMARKS }
'.system-button-camera[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.CAMERA }
'.system-button-cancel[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.CANCEL }
'.system-button-compose[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.COMPOSE }
'.system-button-contact_add[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.CONTACT_ADD }
'.system-button-disclosure[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.DISCLOSURE }
'.system-button-done[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.DONE }
'.system-button-edit[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.EDIT }
'.system-button-fast-forward[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.FAST_FORWARD }
'.system-button-fixed-space[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.FIXED_SPACE }
'.system-button-flexible-space[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.FLEXIBLE_SPACE }
'.system-button-info-dark[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.INFO_DARK }
'.system-button-info-light[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.INFO_LIGHT }
'.system-button-organize[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.ORGANIZE }
'.system-button-pause[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.PAUSE }
'.system-button-play[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.PLAY }
'.system-button-refresh[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.REFRESH }
'.system-button-reply[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.REPLY }
'.system-button-rewind[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.REWIND }
'.system-button-save[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.SAVE }
'.system-button-spinner[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.SPINNER }
'.system-button-stop[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.STOP }
'.system-button-trash[platform=ios]': { systemButton: Ti.UI.iOS.SystemButton.TRASH }
```
### Ti.UI.ListView, Ti.UI.TableView
#### separatorStyle
```css
// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): separatorStyle
'.separator-style-none': { separatorStyle: Ti.UI.TABLE_VIEW_SEPARATOR_STYLE_NONE }
'.separator-style-single-line': { separatorStyle: Ti.UI.TABLE_VIEW_SEPARATOR_STYLE_SINGLE_LINE }
```
#### showSearchBarInNavBar
```css
// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): showSearchBarInNavBar - iOS Only
'.show-search-in-nav[platform=ios]': { showSearchBarInNavBar: true }
'.show-search-bar-in-nav-bar[platform=ios]': { showSearchBarInNavBar: true }
'.hide-search-in-nav[platform=ios]': { showSearchBarInNavBar: false }
'.hide-search-bar-in-nav-bar[platform=ios]': { showSearchBarInNavBar: false }
```
### style property
#### Ti.UI.AlertDialog
```css
// Component(s): Ti.UI.AlertDialog
// Property(ies): style - iOS Only
'.alert-dialog-style[platform=ios]': { style: Ti.UI.iOS.AlertDialogStyle.DEFAULT }
'.alert-dialog-style-login-and-password[platform=ios]': { style: Ti.UI.iOS.AlertDialogStyle.LOGIN_AND_PASSWORD_INPUT }
'.alert-dialog-style-plain-text-input[platform=ios]': { style: Ti.UI.iOS.AlertDialogStyle.PLAIN_TEXT_INPUT }
'.alert-dialog-style-secure-text-input[platform=ios]': { style: Ti.UI.iOS.AlertDialogStyle.SECURE_TEXT_INPUT }
```
#### Ti.UI.ListView
```css
// Component(s): Ti.UI.ListView
// Property(ies): style - iOS Only
'.list-view-style-plain[platform=ios]': { style: Ti.UI.iOS.ListViewStyle.PLAIN }
'.list-view-style-group[platform=ios]': { style: Ti.UI.iOS.ListViewStyle.GROUPED }
'.list-view-style-inset-grouped[platform=ios]': { style: Ti.UI.iOS.ListViewStyle.INSET_GROUPED }
```
#### Ti.UI.iOS.PreviewAction, Ti.UI.iOS.PreviewActionGroup
```css
// Component(s): Ti.UI.iOS.PreviewAction, Ti.UI.iOS.PreviewActionGroup
// Property(ies): style - iOS Only
'.preview-action-style[platform=ios]': { style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT }
'.preview-action-style-selected[platform=ios]': { style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_SELECTED }
'.preview-action-style-destrutive[platform=ios]': { style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DESTRUCTIVE }
```
#### Ti.UI.ProgressBar
```css
// Component(s): Ti.UI.ProgressBar
// Property(ies): style - iOS Only
'.progress-bar-style-bar[platform=ios]': { style: Ti.UI.iOS.ProgressBarStyle.BAR }
'.progress-bar-style[platform=ios]': { style: Ti.UI.iOS.ProgressBarStyle.DEFAULT }
'.progress-bar-style-plain[platform=ios]': { style: Ti.UI.iOS.ProgressBarStyle.PLAIN }
```
#### Ti.UI.Switch
```css
// Component(s): Ti.UI.Switch
// Property(ies): style
'.search-bar-style-checkox': { style: Ti.UI.SWITCH_STYLE_CHECKBOX }
'.search-bar-style-chip': { style: Ti.UI.SWITCH_STYLE_CHIP }
'.search-bar-style-slider': { style: Ti.UI.SWITCH_STYLE_SLIDER }
'.search-bar-style-toggle-button': { style: Ti.UI.SWITCH_STYLE_TOGGLE_BUTTON }
```
#### Ti.UI.TableView
```css
// Component(s): Ti.UI.TableView
// Property(ies): style - iOS Only
'.table-view-style-grouped[platform=ios]': { style: Ti.UI.iOS.TableViewStyle.GROUPED }
'.table-view-style-plain[platform=ios]': { style: Ti.UI.iOS.TableViewStyle.PLAIN }
'.table-view-style-inset-group[platform=ios]': { style: Ti.UI.iOS.TableViewStyle.INSET_GROUPED }
```
#### Ti.UI.TabGroup
```css
// Component(s): Ti.UI.TabGroup
// Property(ies): style - Android Only
'.tabs-style[platform=android]': { style: Ti.UI.Android.TABS_STYLE_DEFAULT }
'.tabs-style-bottom-navigation[platform=android]': { style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION }
```
### Multiple components
#### accessibilityHidden
```css
// Component(s): Ti.UI.View
// Property(ies): accessibilityHidden
'.accessibility-hidden': { accessibilityHidden: true }
'.accessibility-not-hidden': { accessibilityHidden: false }
```
#### disableBounce
```css
// Component(s): Ti.UI.ListView, Ti.UI.ScrollableView, Ti.UI.ScrollView, Ti.UI.WebView
// Property(ies): disableBounce - iOS Only
'.disable-bounce[platform=ios]': { disableBounce: true }
'.enable-bounce[platform=ios]': { disableBounce: false }
```
#### submitEnabled
```css
// Component(s): Ti.UI.Android.SearchView
// Property(ies): submitEnabled - Android Only
'.submit-enabled[platform=android]': { submitEnabled: true }
'.submit-disabled[platform=android]': { submitEnabled: false }
```
#### iconified
```css
// Component(s): Ti.UI.Android.SearchView, Ti.UI.Android.SearchBar
// Property(ies): iconified
'.iconified': { iconified: true }
```
#### iconifiedByDefault
```css
// Component(s): Ti.UI.Android.SearchView, Ti.UI.SearchBar
// Property(ies): iconifiedByDefault
'.iconified-by-default': { iconifiedByDefault: true }
```
#### scrollIndicatorStyle
```css
// Component(s): Ti.UI.ListView, Ti.UI.ScrollView, Ti.UI.TableView
// Property(ies): scrollIndicatorStyle - iOS Only
'.scrolling-indicator-style-black[platform=ios]': { scrollIndicatorStyle: Ti.UI.iOS.ScrollIndicatorStyle.BLACK }
'.scrolling-indicator-style[platform=ios]': { scrollIndicatorStyle: Ti.UI.iOS.ScrollIndicatorStyle.DEFAULT }
'.scrolling-indicator-style-white[platform=ios]': { scrollIndicatorStyle: Ti.UI.iOS.ScrollIndicatorStyle.WHITE }
```
#### scrollsToTop
```css
// Component(s): Ti.UI.ScrollView, Ti.UI.TableView, Ti.UI.TextArea, Ti.UI.WebView
// Property(ies): scrollsToTop - iOS Only
'.scrolls-to-top[platform=ios]': { scrollsToTop: true }
'.dont-scrolls-to-top[platform=ios]': { scrollsToTop: false }
```
#### selectedColor
```css
// Component(s): Ti.UI.Button, Ti.UI.ListItem, Ti.UI.TableViewRow
// Property(ies): selectedColor - iOS Only
'.selected-transparent[platform=ios]': { selectedColor: 'transparent' }
'.selected-black[platform=ios]': { selectedColor: '#000000' }
'.selected-white[platform=ios]': { selectedColor: '#ffffff' }
'.selected-slate-50[platform=ios]': { selectedColor: '#f8fafc' }
'.selected-slate-100[platform=ios]': { selectedColor: '#f1f5f9' }
// ...
```
#### selectionStyle
```css
// Component(s): Ti.UI.ListItem, Ti.UI.TableViewRow
// Property(ies): selectionStyle
'.selection-style': { selectionStyle: Ti.UI.SELECTION_STYLE_DEFAULT }
'.selection-style-none': { selectionStyle: Ti.UI.SELECTION_STYLE_NONE }
```
#### touchFeedback
```css
// Component(s): Ti.UI.ListView, Ti.UI.TableView, Ti.UI.View
// Property(ies): touchFeedback - Android Only
'.touch-feedback[platform=android]': { touchFeedback: true }
'.dont-touch-feedback[platform=android]': { touchFeedback: false }
```