@maccesar/titools 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS-TEMPLATE.md +173 -0
- package/README.md +867 -0
- package/agents/ti-researcher.md +108 -0
- package/bin/titools.js +53 -0
- package/lib/commands/agents.js +126 -0
- package/lib/commands/install.js +188 -0
- package/lib/commands/uninstall.js +215 -0
- package/lib/commands/update.js +159 -0
- package/lib/config.js +119 -0
- package/lib/downloader.js +153 -0
- package/lib/installer.js +253 -0
- package/lib/platform.js +108 -0
- package/lib/symlink.js +142 -0
- package/lib/utils.js +270 -0
- package/package.json +67 -0
- package/skills/alloy-expert/SKILL.md +247 -0
- package/skills/alloy-expert/assets/ControllerAutoCleanup.js +182 -0
- package/skills/alloy-expert/references/alloy-structure.md +381 -0
- package/skills/alloy-expert/references/anti-patterns.md +133 -0
- package/skills/alloy-expert/references/code-conventions.md +469 -0
- package/skills/alloy-expert/references/contracts.md +280 -0
- package/skills/alloy-expert/references/controller-patterns.md +520 -0
- package/skills/alloy-expert/references/error-handling.md +484 -0
- package/skills/alloy-expert/references/examples.md +735 -0
- package/skills/alloy-expert/references/migration-patterns.md +298 -0
- package/skills/alloy-expert/references/patterns.md +448 -0
- package/skills/alloy-expert/references/performance-patterns.md +855 -0
- package/skills/alloy-expert/references/security-patterns.md +847 -0
- package/skills/alloy-expert/references/state-management.md +779 -0
- package/skills/alloy-expert/references/testing.md +872 -0
- package/skills/alloy-guides/SKILL.md +214 -0
- package/skills/alloy-guides/references/CLI_TASKS.md +243 -0
- package/skills/alloy-guides/references/CONCEPTS.md +191 -0
- package/skills/alloy-guides/references/CONTROLLERS.md +298 -0
- package/skills/alloy-guides/references/MODELS.md +1028 -0
- package/skills/alloy-guides/references/PURGETSS.md +56 -0
- package/skills/alloy-guides/references/VIEWS_DYNAMIC.md +242 -0
- package/skills/alloy-guides/references/VIEWS_STYLES.md +388 -0
- package/skills/alloy-guides/references/VIEWS_WITHOUT_CONTROLLERS.md +109 -0
- package/skills/alloy-guides/references/VIEWS_XML.md +558 -0
- package/skills/alloy-guides/references/WIDGETS.md +176 -0
- package/skills/alloy-howtos/SKILL.md +203 -0
- package/skills/alloy-howtos/references/best_practices.md +138 -0
- package/skills/alloy-howtos/references/cli_reference.md +253 -0
- package/skills/alloy-howtos/references/config_files.md +87 -0
- package/skills/alloy-howtos/references/custom_tags.md +147 -0
- package/skills/alloy-howtos/references/debugging_troubleshooting.md +101 -0
- package/skills/alloy-howtos/references/samples.md +167 -0
- package/skills/purgetss/SKILL.md +442 -0
- package/skills/purgetss/assets/purgetss.config.cjs +17 -0
- package/skills/purgetss/references/EXAMPLES.md +247 -0
- package/skills/purgetss/references/animation-system.md +1294 -0
- package/skills/purgetss/references/apply-directive.md +375 -0
- package/skills/purgetss/references/arbitrary-values.md +612 -0
- package/skills/purgetss/references/class-index.md +1350 -0
- package/skills/purgetss/references/cli-commands.md +948 -0
- package/skills/purgetss/references/configurable-properties.md +654 -0
- package/skills/purgetss/references/custom-rules.md +161 -0
- package/skills/purgetss/references/customization-deep-dive.md +722 -0
- package/skills/purgetss/references/dynamic-component-creation.md +489 -0
- package/skills/purgetss/references/grid-layout.md +455 -0
- package/skills/purgetss/references/icon-fonts.md +609 -0
- package/skills/purgetss/references/installation-setup.md +366 -0
- package/skills/purgetss/references/opacity-modifier.md +291 -0
- package/skills/purgetss/references/platform-modifiers.md +479 -0
- package/skills/purgetss/references/smart-mappings.md +42 -0
- package/skills/purgetss/references/titanium-resets.md +359 -0
- package/skills/purgetss/references/ui-ux-design.md +1526 -0
- package/skills/ti-guides/SKILL.md +94 -0
- package/skills/ti-guides/references/advanced-data-and-images.md +19 -0
- package/skills/ti-guides/references/alloy-cli-advanced.md +84 -0
- package/skills/ti-guides/references/alloy-data-mastery.md +29 -0
- package/skills/ti-guides/references/alloy-widgets-and-themes.md +19 -0
- package/skills/ti-guides/references/android-manifest.md +97 -0
- package/skills/ti-guides/references/app-distribution.md +258 -0
- package/skills/ti-guides/references/application-frameworks.md +377 -0
- package/skills/ti-guides/references/cli-reference.md +402 -0
- package/skills/ti-guides/references/coding-best-practices.md +102 -0
- package/skills/ti-guides/references/commonjs-advanced.md +134 -0
- package/skills/ti-guides/references/hello-world.md +100 -0
- package/skills/ti-guides/references/hyperloop-native-access.md +62 -0
- package/skills/ti-guides/references/javascript-primer.md +411 -0
- package/skills/ti-guides/references/reserved-words.md +36 -0
- package/skills/ti-guides/references/resources.md +183 -0
- package/skills/ti-guides/references/style-and-conventions.md +48 -0
- package/skills/ti-guides/references/tiapp-config.md +609 -0
- package/skills/ti-howtos/SKILL.md +174 -0
- package/skills/ti-howtos/references/android-platform-deep-dives.md +658 -0
- package/skills/ti-howtos/references/automation-fastlane-appium.md +95 -0
- package/skills/ti-howtos/references/buffer-codec-streams.md +140 -0
- package/skills/ti-howtos/references/cross-platform-development.md +348 -0
- package/skills/ti-howtos/references/debugging-profiling.md +543 -0
- package/skills/ti-howtos/references/extending-titanium.md +723 -0
- package/skills/ti-howtos/references/google-maps-v2.md +169 -0
- package/skills/ti-howtos/references/ios-map-kit.md +143 -0
- package/skills/ti-howtos/references/ios-platform-deep-dives.md +783 -0
- package/skills/ti-howtos/references/local-data-sources.md +301 -0
- package/skills/ti-howtos/references/location-and-maps.md +252 -0
- package/skills/ti-howtos/references/media-apis.md +210 -0
- package/skills/ti-howtos/references/notification-services.md +599 -0
- package/skills/ti-howtos/references/remote-data-sources.md +349 -0
- package/skills/ti-howtos/references/tutorials.md +502 -0
- package/skills/ti-howtos/references/using-modules.md +237 -0
- package/skills/ti-howtos/references/web-content-integration.md +307 -0
- package/skills/ti-howtos/references/webpack-build-pipeline.md +78 -0
- package/skills/ti-ui/SKILL.md +179 -0
- package/skills/ti-ui/references/accessibility-deep-dive.md +242 -0
- package/skills/ti-ui/references/animation-and-matrices.md +599 -0
- package/skills/ti-ui/references/application-structures.md +655 -0
- package/skills/ti-ui/references/custom-fonts-styling.md +579 -0
- package/skills/ti-ui/references/event-handling.md +393 -0
- package/skills/ti-ui/references/gestures.md +473 -0
- package/skills/ti-ui/references/icons-and-splash-screens.md +409 -0
- package/skills/ti-ui/references/layouts-and-positioning.md +462 -0
- package/skills/ti-ui/references/listviews-and-performance.md +619 -0
- package/skills/ti-ui/references/orientation.md +362 -0
- package/skills/ti-ui/references/platform-ui-android.md +635 -0
- package/skills/ti-ui/references/platform-ui-ios.md +469 -0
- package/skills/ti-ui/references/scrolling-views.md +252 -0
- package/skills/ti-ui/references/tableviews.md +568 -0
|
@@ -0,0 +1,1350 @@
|
|
|
1
|
+
# PurgeTSS Class Index
|
|
2
|
+
|
|
3
|
+
**Based on the actual PurgeTSS `utilities.tss` file - 21,236 unique utility classes across 364 unique prefixes covering 416 Titanium properties**
|
|
4
|
+
|
|
5
|
+
Before suggesting ANY class, verify it exists:
|
|
6
|
+
```bash
|
|
7
|
+
grep -E "PATTERN" ./purgetss/styles/utilities.tss
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
## Table of Contents
|
|
11
|
+
|
|
12
|
+
- [PurgeTSS Class Index](#purgetss-class-index)
|
|
13
|
+
- [Table of Contents](#table-of-contents)
|
|
14
|
+
- [PurgeTSS Naming Conventions](#purgetss-naming-conventions)
|
|
15
|
+
- [How Classes Are Generated from Titanium Properties](#how-classes-are-generated-from-titanium-properties)
|
|
16
|
+
- [1. Basic Conversion: camelCase → kebab-case](#1-basic-conversion-camelcase--kebab-case)
|
|
17
|
+
- [2. Boolean Properties: `property` and `property-false`](#2-boolean-properties-property-and-property-false)
|
|
18
|
+
- [3. Color Properties: Special Word Replacements](#3-color-properties-special-word-replacements)
|
|
19
|
+
- [4. No kebab-case Conversion](#4-no-kebab-case-conversion)
|
|
20
|
+
- [Finding Properties in utilities.tss](#finding-properties-in-utilitiestss)
|
|
21
|
+
- [Multiple Properties Grouped Together](#multiple-properties-grouped-together)
|
|
22
|
+
- [All 416 Titanium Properties with Classes](#all-416-titanium-properties-with-classes)
|
|
23
|
+
- [A-E](#a-e)
|
|
24
|
+
- [F-L](#f-l)
|
|
25
|
+
- [M-P](#m-p)
|
|
26
|
+
- [R-Z](#r-z)
|
|
27
|
+
- [Class Categories by Prefix (Complete Inventory)](#class-categories-by-prefix-complete-inventory)
|
|
28
|
+
- [Layout \& Structure](#layout--structure)
|
|
29
|
+
- [Spacing (Margins \& Padding)](#spacing-margins--padding)
|
|
30
|
+
- [Positioning](#positioning)
|
|
31
|
+
- [Colors (Background)](#colors-background)
|
|
32
|
+
- [Colors (Text \& Foreground)](#colors-text--foreground)
|
|
33
|
+
- [Borders \& Radius](#borders--radius)
|
|
34
|
+
- [Typography](#typography)
|
|
35
|
+
- [Accessibility](#accessibility)
|
|
36
|
+
- [Input \& Keyboard](#input--keyboard)
|
|
37
|
+
- [Boolean \& State Classes](#boolean--state-classes)
|
|
38
|
+
- [Text Transformation](#text-transformation)
|
|
39
|
+
- [Opacity](#opacity)
|
|
40
|
+
- [Transformation \& Animation](#transformation--animation)
|
|
41
|
+
- [Shadows \& Elevation](#shadows--elevation)
|
|
42
|
+
- [Z-Index \& Overflow](#z-index--overflow)
|
|
43
|
+
- [Status Bar \& Navigation](#status-bar--navigation)
|
|
44
|
+
- [UI Component States](#ui-component-states)
|
|
45
|
+
- [Display \& Sizing](#display--sizing)
|
|
46
|
+
- [Media \& Video](#media--video)
|
|
47
|
+
- [Other Special Prefixes](#other-special-prefixes)
|
|
48
|
+
- [PROHIBITED: CSS Classes (DO NOT EXIST)](#prohibited-css-classes-do-not-exist)
|
|
49
|
+
- [All 364 Unique Prefixes (Alphabetical)](#all-364-unique-prefixes-alphabetical)
|
|
50
|
+
- [Quick Verification Commands](#quick-verification-commands)
|
|
51
|
+
- [When to Use Direct Properties (No Classes)](#when-to-use-direct-properties-no-classes)
|
|
52
|
+
- [Key Insights from Real Data](#key-insights-from-real-data)
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## PurgeTSS Naming Conventions
|
|
57
|
+
|
|
58
|
+
### How Classes Are Generated from Titanium Properties
|
|
59
|
+
|
|
60
|
+
Every PurgeTSS class follows systematic naming rules derived from Titanium SDK property names:
|
|
61
|
+
|
|
62
|
+
#### 1. Basic Conversion: camelCase → kebab-case
|
|
63
|
+
|
|
64
|
+
```javascript
|
|
65
|
+
// Titanium Property → PurgeTSS Class
|
|
66
|
+
keepSectionsInSearch → keep-sections-in-search
|
|
67
|
+
backgroundColor → bg-*
|
|
68
|
+
keyboardType → keyboard-type-*
|
|
69
|
+
returnKeyType → return-key-type-*
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
#### 2. Boolean Properties: `property` and `property-false`
|
|
73
|
+
|
|
74
|
+
```javascript
|
|
75
|
+
// Property: editable
|
|
76
|
+
'.editable': { editable: true }
|
|
77
|
+
'.editable-false': { editable: false }
|
|
78
|
+
|
|
79
|
+
// Property: enabled
|
|
80
|
+
'.enabled': { enabled: true }
|
|
81
|
+
'.enabled-false': { enabled: false }
|
|
82
|
+
|
|
83
|
+
// Property: visible
|
|
84
|
+
'.visible': { visible: true }
|
|
85
|
+
'.visible-false': { visible: false }
|
|
86
|
+
'.hidden': { visible: false } // alias
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
#### 3. Color Properties: Special Word Replacements
|
|
90
|
+
|
|
91
|
+
| Pattern | Property | Class Example |
|
|
92
|
+
| ------------------- | ------------------------ | ---------------------- |
|
|
93
|
+
| `*BackgroundColor` | `resultsBackgroundColor` | `results-bg-gray-900` |
|
|
94
|
+
| `*Background*Color` | `barBackgroundColor` | `bar-bg-gray-900` |
|
|
95
|
+
| `*Color` | `titleColor` | `title-gray-900` |
|
|
96
|
+
| `*TextColor` | `titleTextColor` | `title-text-gray-900` |
|
|
97
|
+
| `TintColor` | `activeTintColor` | `active-tint-gray-900` |
|
|
98
|
+
|
|
99
|
+
**Color Word Replacements:**
|
|
100
|
+
- `Background` → `bg-`
|
|
101
|
+
- `Color` → (omitted, color value follows)
|
|
102
|
+
- `TextColor` → `text-`
|
|
103
|
+
- `TintColor` → `tint-`
|
|
104
|
+
|
|
105
|
+
#### 4. No kebab-case Conversion
|
|
106
|
+
|
|
107
|
+
Some properties use distinct class names (no kebab-case conversion):
|
|
108
|
+
|
|
109
|
+
```javascript
|
|
110
|
+
// Property: autocapitalization
|
|
111
|
+
'.uppercase': { autocapitalization: Ti.UI.TEXT_AUTOCAPITALIZATION_ALL }
|
|
112
|
+
'.normal-case': { autocapitalization: Ti.UI.TEXT_AUTOCAPITALIZATION_NONE }
|
|
113
|
+
'.capitalize': { autocapitalization: Ti.UI.TEXT_AUTOCAPITALIZATION_WORDS }
|
|
114
|
+
'.sentences': { autocapitalization: Ti.UI.TEXT_AUTOCAPITALIZATION_SENTENCES }
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Finding Properties in utilities.tss
|
|
118
|
+
|
|
119
|
+
Each property section in the file includes documentation:
|
|
120
|
+
|
|
121
|
+
```tss
|
|
122
|
+
// Property(ies): contentWidth, contentHeight
|
|
123
|
+
// Component(s): Ti.UI.ScrollView
|
|
124
|
+
'.content-w-screen': { contentWidth: Ti.UI.FILL }
|
|
125
|
+
'.content-h-screen': { contentHeight: Ti.UI.FILL }
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
**Comment Patterns:**
|
|
129
|
+
- `// Property: propertyName` - Single property
|
|
130
|
+
- `// Property(ies): prop1, prop2` - Multiple properties
|
|
131
|
+
- `// Component(s): Ti.UI.View, ...` - Which components use these classes
|
|
132
|
+
- `// Description: ...` - Optional description
|
|
133
|
+
|
|
134
|
+
**Exception:** Only `// debug` exists without a `Property:` label.
|
|
135
|
+
|
|
136
|
+
Search for any property to see its available classes:
|
|
137
|
+
```bash
|
|
138
|
+
# Find by property name
|
|
139
|
+
grep -A 20 "// Property: keyboardType" ./purgetss/styles/utilities.tss
|
|
140
|
+
|
|
141
|
+
# Find by multiple properties
|
|
142
|
+
grep -A 20 "// Property(ies): contentWidth, contentHeight" ./purgetss/styles/utilities.tss
|
|
143
|
+
|
|
144
|
+
# Find by component
|
|
145
|
+
grep -B 2 "Component(s): Ti.UI.TextField" ./purgetss/styles/utilities.tss
|
|
146
|
+
|
|
147
|
+
# Find all properties for a component
|
|
148
|
+
grep -B 2 "Component(s):.*Ti.UI.ListView" ./purgetss/styles/utilities.tss | grep "// Property"
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## Multiple Properties Grouped Together
|
|
154
|
+
|
|
155
|
+
Some PurgeTSS classes combine multiple Titanium properties under a single class prefix:
|
|
156
|
+
|
|
157
|
+
| Class Prefix | Properties | Description |
|
|
158
|
+
| ------------------------ | -------------------------------------------------------------- | -------------------------- |
|
|
159
|
+
| `anchor-point-*` | `anchorPoint` | Animation/View positioning |
|
|
160
|
+
| `autocapitalization-*` | `autocapitalization` | Text capitalization |
|
|
161
|
+
| `bg-gradient-*` | `backgroundGradient` | Linear gradients |
|
|
162
|
+
| `bg-radial-*` | `backgroundGradient` | Radial gradients (iOS) |
|
|
163
|
+
| `clip-mode-*` | `clipMode` | iOS clipping |
|
|
164
|
+
| `content-*` | `contentWidth`, `contentHeight` | ScrollView content size |
|
|
165
|
+
| `curve-*` | `curve` | Animation easing |
|
|
166
|
+
| `dragging-*` | `draggingType` | Animation module dragging |
|
|
167
|
+
| `filter-attribute-*` | `filterAttribute` | ListView filtering |
|
|
168
|
+
| `flip-*` | `flip` | Animation flipping |
|
|
169
|
+
| `font-*` | `fontFamily`, `fontSize`, `fontStyle`, `fontWeight` | Typography |
|
|
170
|
+
| `grid-*` | Various | Grid layout system |
|
|
171
|
+
| `h-*` | `height` | All components |
|
|
172
|
+
| `hint-*` | `hintTextColor` | TextField placeholder |
|
|
173
|
+
| `layout-*` | `layout` | View layout modes |
|
|
174
|
+
| `minimum-font-size-*` | `minimumFontSize` | Label auto-shrink |
|
|
175
|
+
| `navigation-*` | `navigationMode` | Navigation modes |
|
|
176
|
+
| `orientation-modes-*` | `orientationModes` | Supported orientations |
|
|
177
|
+
| `origin-*` | `anchorPoint` | Transform origin |
|
|
178
|
+
| `padding-*` | `padding` | Android-specific padding |
|
|
179
|
+
| `rotate-*` | `rotate` | 2D Matrix rotation |
|
|
180
|
+
| `scale-*` | `scale` | 2D Matrix scaling |
|
|
181
|
+
| `scroll-type-*` | `scrollType` | Android scroll type |
|
|
182
|
+
| `shadow-*` | `shadowOffset`, `shadowRadius`, `shadowColor` | Box shadows |
|
|
183
|
+
| `show-*scroll-indicator` | `showHorizontalScrollIndicator`, `showVerticalScrollIndicator` | ScrollView |
|
|
184
|
+
| `status-bar-style-*` | `statusBarStyle` | iOS status bar |
|
|
185
|
+
| `tint-*` | `tintColor` | View/Button tinting |
|
|
186
|
+
| `title-*` | `titleAttributes: color/shadow` | iOS title styling |
|
|
187
|
+
| `toggle-*` | `toggle` | Animation toggle |
|
|
188
|
+
| `w-*` | `width` | All components |
|
|
189
|
+
| `wh-*` | `width`, `height` | Combined width/height |
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
## All 416 Titanium Properties with Classes
|
|
194
|
+
|
|
195
|
+
The following properties have PurgeTSS utility classes. Each property name converts to kebab-case for the class prefix.
|
|
196
|
+
|
|
197
|
+
### A-E
|
|
198
|
+
|
|
199
|
+
| Property | Class Prefix | Notes |
|
|
200
|
+
| ---------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------- |
|
|
201
|
+
| `accessibilityDisableLongPress` | `accessibility-disable-long-press` | Boolean |
|
|
202
|
+
| `accessibilityEnabled` | `accessibility-enabled` | Boolean |
|
|
203
|
+
| `accessibilityHidden` | `accessibility-hidden` | Boolean |
|
|
204
|
+
| `accessoryType` | `accessory-type` | ListView/TableView |
|
|
205
|
+
| `accuracy` | `accuracy` | Location |
|
|
206
|
+
| `accuracyAuthorization` | `accuracy-authorization` | Location |
|
|
207
|
+
| `actionViewExpanded` | `action-view-expanded` | iOS |
|
|
208
|
+
| `activationMode` | `activation-mode` | Notifications |
|
|
209
|
+
| `active` | `active` | Boolean |
|
|
210
|
+
| `activeIconIsMask` | `active-icon-is-mask` | Tabs |
|
|
211
|
+
| `activeTab` | `active-tab` | Tabs |
|
|
212
|
+
| `activeTintColor` | `active-tint-*` | Color variants |
|
|
213
|
+
| `activeTitleColor` | `active-title-*` | Color variants |
|
|
214
|
+
| `activityEnterTransition` | `activity-enter-transition` | Android |
|
|
215
|
+
| `activityExitTransition` | `activity-exit-transition` | Android |
|
|
216
|
+
| `activityReenterTransition` | `activity-reenter-transition` | Android |
|
|
217
|
+
| `activityReturnTransition` | `activity-return-transition` | Android |
|
|
218
|
+
| `activitySharedElementEnterTransition` | `activity-shared-element-enter-transition` | Android |
|
|
219
|
+
| `activitySharedElementExitTransition` | `activity-shared-element-exit-transition` | Android |
|
|
220
|
+
| `activitySharedElementReenterTransition` | `activity-shared-element-reenter-transition` | Android |
|
|
221
|
+
| `activitySharedElementReturnTransition` | `activity-shared-element-return-transition` | Android |
|
|
222
|
+
| `activityType` | `activity-type` | Android |
|
|
223
|
+
| `alertSetting` | `alert-setting` | Notifications |
|
|
224
|
+
| `alertStyle` | `alert-style` | AlertDialog |
|
|
225
|
+
| `alignment` | `alignment` | Text alignment |
|
|
226
|
+
| `allDay` | `all-day` | Calendar events |
|
|
227
|
+
| `allowBackground` | `allow-background` | Android |
|
|
228
|
+
| `allowCreation` | `allow-creation` | Contacts |
|
|
229
|
+
| `allowEditing` | `allow-editing` | Calendar events |
|
|
230
|
+
| `allowFileAccess` | `allow-file-access` | WebView |
|
|
231
|
+
| `allowMultiple` | `allow-multiple` | Media picker |
|
|
232
|
+
| `allowMultipleSelections` | `allow-multiple-selections` | Picker |
|
|
233
|
+
| `allowsAirPlay` | `allows-air-play` | Video player |
|
|
234
|
+
| `allowsBackForwardNavigationGestures` | `allows-back-forward-navigation-gestures` | iOS WebView |
|
|
235
|
+
| `allowsBackgroundLocationUpdates` | `allows-background-location-updates` | Location |
|
|
236
|
+
| `allowsDefaultTighteningForTruncation` | `allows-default-tightening-for-truncation` | Label |
|
|
237
|
+
| `allowsExternalPlayback` | `allows-external-playback` | Video player |
|
|
238
|
+
| `allowsInlineMediaPlayback` | `allows-inline-media-playback` | iOS WebView |
|
|
239
|
+
| `allowsLinkPreview` | `allows-link-preview` | iOS |
|
|
240
|
+
| `allowsMultipleSelectionDuringEditing` | `allows-multiple-selection-during-editing` | ListView |
|
|
241
|
+
| `allowsMultipleSelectionInteraction` | `allows-multiple-selection-interaction` | iOS |
|
|
242
|
+
| `allowsPictureInPictureMediaPlayback` | `allows-picture-in-picture-media-playback` | iOS Video |
|
|
243
|
+
| `allowsRotation` | `allows-rotation` | Video player |
|
|
244
|
+
| `allowsSelection` | `allows-selection` | ListView |
|
|
245
|
+
| `allowsSelectionDuringEditing` | `allows-selection-during-editing` | iOS |
|
|
246
|
+
| `allowTranscoding` | `allow-transcoding` | Media picker |
|
|
247
|
+
| `allowUserCustomization` | `allow-user-customization` | Toolbar |
|
|
248
|
+
| `animated` | `animated` | Boolean |
|
|
249
|
+
| `animationStyle` | `animation-style` | Navigation |
|
|
250
|
+
| `appSupportsShakeToEdit` | `app-supports-shake-to-edit` | iOS |
|
|
251
|
+
| `arrowDirection` | `arrow-direction` | Popover |
|
|
252
|
+
| `aspectRatio` | `aspect-ratio` | `aspect-ratio-16-9`, `aspect-ratio-4-3` |
|
|
253
|
+
| `audioFocus` | `audio-focus` | Audio player |
|
|
254
|
+
| `audioPlaying` | `audio-playing` | Boolean |
|
|
255
|
+
| `audioSessionCategory` | `audio-session-category` | Audio player |
|
|
256
|
+
| `audioStreamType` | `audio-stream-type` | Android Audio |
|
|
257
|
+
| `audioType` | `audio-type` | Audio player |
|
|
258
|
+
| `authenticationRequired` | `authentication-required` | Notifications |
|
|
259
|
+
| `authorizationStatus` | `authorization-status` | Location/Permissions |
|
|
260
|
+
| `autoAdjustScrollViewInsets` | `auto-adjust-scroll-view-insets` | iOS |
|
|
261
|
+
| `autocapitalization` | `autocapitalization-*`, `uppercase`, `capitalize`, `sentences`, `normal-case` | TextField |
|
|
262
|
+
| `autocorrect` | `autocorrect`, `autocorrect-false` | TextField |
|
|
263
|
+
| `autoEncodeUrl` | `auto-encode-url` | WebView |
|
|
264
|
+
| `autofillType` | `autofill-type` | TextField |
|
|
265
|
+
| `autohide` | `autohide`, `autohide-false` | Various |
|
|
266
|
+
| `autoHide` | `auto-hide` | ScrollView |
|
|
267
|
+
| `autoLink` | `auto-link` | Label (phone, email, web, address, etc.) |
|
|
268
|
+
| `autoplay` | `autoplay`, `autoplay-false` | Video player |
|
|
269
|
+
| `autoRedirect` | `auto-redirect` | WebView |
|
|
270
|
+
| `autorepeat` | `autorepeat`, `autorepeat-false` | Button |
|
|
271
|
+
| `autoreverse` | `autoreverse`, `autoreverse-false` | Animation |
|
|
272
|
+
| `autorotate` | `autorotate`, `autorotate-false` | Video/Window |
|
|
273
|
+
| `autoSize` | `auto-size` | TextArea |
|
|
274
|
+
| `autoTabTitle` | `auto-tab-title` | Tab |
|
|
275
|
+
| `availability` | `availability` | Calendar events |
|
|
276
|
+
| `availableCameraMediaTypes` | `available-camera-media-types` | Media picker |
|
|
277
|
+
| `availableCameras` | `available-cameras` | Camera |
|
|
278
|
+
| `availablePhotoGalleryMediaTypes` | `available-photo-gallery-media-types` | Media picker |
|
|
279
|
+
| `availablePhotoMediaTypes` | `available-photo-media-types` | Media picker |
|
|
280
|
+
| `backfillEnd` | `backfill-end` | Picker |
|
|
281
|
+
| `backfillStart` | `backfill-start` | Picker |
|
|
282
|
+
| `backgroundColor` | `bg-*` | All components |
|
|
283
|
+
| `backgroundDisabledColor` | `background-disabled-*` | Button |
|
|
284
|
+
| `backgroundFocusedColor` | `background-focused-*` | Button |
|
|
285
|
+
| `backgroundLeftCap` | `background-left-cap` | ImageView |
|
|
286
|
+
| `backgroundPaddingBottom` | `background-padding-bottom` | ImageView |
|
|
287
|
+
| `backgroundPaddingLeft` | `background-padding-left` | ImageView |
|
|
288
|
+
| `backgroundPaddingRight` | `background-padding-right` | ImageView |
|
|
289
|
+
| `backgroundPaddingTop` | `background-padding-top` | ImageView |
|
|
290
|
+
| `backgroundRepeat` | `background-repeat` | ImageView |
|
|
291
|
+
| `backgroundSelectedColor` | `background-selected-*` | Button/TableView |
|
|
292
|
+
| `backgroundTopCap` | `background-top-cap` | ImageView |
|
|
293
|
+
| `backward` | `backward` | Boolean |
|
|
294
|
+
| `badgeBackgroundColor` | `badge-bg-*` | Tab/Button |
|
|
295
|
+
| `badgeColor` | `badge-color-*` | Tab |
|
|
296
|
+
| `badgeSetting` | `badge-setting` | Notifications |
|
|
297
|
+
| `badgeTextColor` | `badge-text-*` | Tab |
|
|
298
|
+
| `barColor` | `bar-color-*` | ProgressBar/Slider |
|
|
299
|
+
| `batteryMonitoring` | `battery-monitoring` | Battery |
|
|
300
|
+
| `behavior` | `behavior` | Various |
|
|
301
|
+
| `borderColor` | `border-*` | View |
|
|
302
|
+
| `borderRadius` | `rounded-*` | View |
|
|
303
|
+
| `borderStyle` | `border-style` | TextField |
|
|
304
|
+
| `borderWidth` | `border-*` | View |
|
|
305
|
+
| `bottom` | `bottom-*` | Positioning |
|
|
306
|
+
| `breakStrategy` | `break-strategy` | Android TextView |
|
|
307
|
+
| `bubbleParent` | `bubble-parent` | Event propagation |
|
|
308
|
+
| `bubbles` | `bubbles` | Event propagation |
|
|
309
|
+
| `buttonClickRequired` | `button-click-required` | Switch |
|
|
310
|
+
| `bypassDnd` | `bypass-dnd` | Notifications Android |
|
|
311
|
+
| `cache` | `cache` | Various |
|
|
312
|
+
| `cacheMode` | `cache-mode` | Image loading |
|
|
313
|
+
| `cachePolicy` | `cache-policy` | HTTP client |
|
|
314
|
+
| `cacheSize` | `cache-size` | Image loading |
|
|
315
|
+
| `calendarAuthorization` | `calendar-authorization` | Calendar |
|
|
316
|
+
| `calendarViewShown` | `calendar-view-shown` | DatePicker |
|
|
317
|
+
| `cameraAuthorization` | `camera-authorization` | Camera |
|
|
318
|
+
| `cameraFlashMode` | `camera-flash-mode` | Camera |
|
|
319
|
+
| `canCancelEvents` | `can-cancel-events` | Event handling |
|
|
320
|
+
| `cancelable` | `cancelable` | Boolean |
|
|
321
|
+
| `cancelBubble` | `cancel-bubble` | Event propagation |
|
|
322
|
+
| `canceledOnTouchOutside` | `canceled-on-touch-outside` | Dialog |
|
|
323
|
+
| `canDelete` | `can-delete` | TableView |
|
|
324
|
+
| `canEdit` | `can-edit` | TableView |
|
|
325
|
+
| `canInsert` | `can-insert` | TableView |
|
|
326
|
+
| `canMove` | `can-move` | TableView |
|
|
327
|
+
| `canRecord` | `can-record` | Audio recording |
|
|
328
|
+
| `canScroll` | `can-scroll` | ScrollView |
|
|
329
|
+
| `carPlaySetting` | `car-play-setting` | Notifications iOS |
|
|
330
|
+
| `caseInsensitiveSearch` | `case-insensitive-search` | SearchBar |
|
|
331
|
+
| `caseSensitive` | `case-sensitive` | TextField |
|
|
332
|
+
| `category` | `category` | Notifications |
|
|
333
|
+
| `charset` | `charset` | WebView |
|
|
334
|
+
| `checkable` | `checkable` | Boolean |
|
|
335
|
+
| `checked` | `checked` | Boolean |
|
|
336
|
+
| `clearButtonMode` | `clear-button-mode` | TextField |
|
|
337
|
+
| `clearOnEdit` | `clear-on-edit` | TextField |
|
|
338
|
+
| `clipViews` | `clip-views` | ScrollView |
|
|
339
|
+
| `closed` | `closed` | Boolean |
|
|
340
|
+
| `code` | `code` | Option dialog |
|
|
341
|
+
| `collisionMode` | `collision-mode` | Annotations |
|
|
342
|
+
| `color` | `color-*` | Text/Icon colors |
|
|
343
|
+
| `colors` | `colors-*` | Picker color |
|
|
344
|
+
| `columnCount` | `column-count` | Grid |
|
|
345
|
+
| `compact` | `compact` | Boolean |
|
|
346
|
+
| `compression` | `compression` | Image quality |
|
|
347
|
+
| `connected` | `connected` | Boolean |
|
|
348
|
+
| `contactsAuthorization` | `contacts-authorization` | Contacts |
|
|
349
|
+
| `contentHeight` | `content-h-*` | ScrollView |
|
|
350
|
+
| `contentScrimColor` | `content-scrim-*` | Android |
|
|
351
|
+
| `contentWidth` | `content-w-*` | ScrollView |
|
|
352
|
+
| `continuous` | `continuous` | Boolean |
|
|
353
|
+
| `continuousUpdate` | `continuous-update` | Slider |
|
|
354
|
+
| `countDownDuration` | `count-down-duration` | Timer |
|
|
355
|
+
| `criticalAlertSetting` | `critical-alert-setting` | Notifications iOS |
|
|
356
|
+
| `currentPageIndicatorColor` | `current-page-indicator-*` | ScrollView pager |
|
|
357
|
+
| `curve` | `curve-*` | Animation |
|
|
358
|
+
| `customInspect` | `custom-inspect` | Android WebView |
|
|
359
|
+
| `datePickerStyle` | `date-picker-style` | iOS |
|
|
360
|
+
| `dateTimeColor` | `date-time-*` | Picker |
|
|
361
|
+
| `decelerationRate` | `deceleration-rate` | ScrollView |
|
|
362
|
+
| `defaults` | `defaults` | Notifications |
|
|
363
|
+
| `delay` | `delay-*` | Animation |
|
|
364
|
+
| `destructive` | `destructive` | Boolean |
|
|
365
|
+
| `dimBackgroundForSearch` | `dim-background-for-search` | SearchBar |
|
|
366
|
+
| `disableBounce` | `disable-bounce` | ScrollView |
|
|
367
|
+
| `disableContextMenu` | `disable-context-menu` | Android WebView |
|
|
368
|
+
| `disabledColor` | `disabled-*` | Button/TextField |
|
|
369
|
+
| `disableNetworkActivityIndicator` | `disable-network-activity-indicator` | iOS WebView |
|
|
370
|
+
| `displayHomeAsUp` | `display-as-home-arrow` | Android |
|
|
371
|
+
| `drawerIndicatorEnabled` | `drawer-indicator-enabled` | Android |
|
|
372
|
+
| `drawerLockMode` | `drawer-lock-mode` | Android |
|
|
373
|
+
| `duration` | `duration-*` | Animation |
|
|
374
|
+
| `editable` | `editable`, `editable-false` | TextField |
|
|
375
|
+
| `editing` | `editing` | Boolean |
|
|
376
|
+
| `effect` | `effect` | iOS |
|
|
377
|
+
| `elevation` | `elevation-*` | Android |
|
|
378
|
+
| `eligibleForHandoff` | `eligible-for-handoff` | iOS |
|
|
379
|
+
| `eligibleForPrediction` | `eligible-for-prediction` | iOS |
|
|
380
|
+
| `eligibleForPublicIndexing` | `eligible-for-public-indexing` | Spotlight |
|
|
381
|
+
| `eligibleForSearch` | `eligible-for-search` | Spotlight |
|
|
382
|
+
| `ellipsize` | `ellipsize-*` | Label truncation |
|
|
383
|
+
| `enableCopy` | `enable-copy` | TextArea |
|
|
384
|
+
| `enabled` | `enabled`, `enabled-false` | All components |
|
|
385
|
+
| `enableJavascriptInterface` | `enable-javascript-interface` | Android WebView |
|
|
386
|
+
| `enableKeepAlive` | `enable-keep-alive` | HTTP client |
|
|
387
|
+
| `enableLights` | `enable-lights` | Notifications Android |
|
|
388
|
+
| `enableReturnKey` | `enable-return-key` | TextField |
|
|
389
|
+
| `enableVibration` | `enable-vibration` | Notifications Android |
|
|
390
|
+
| `enableZoomControls` | `enable-zoom-controls` | Android WebView |
|
|
391
|
+
| `exact` | `exact` | Boolean |
|
|
392
|
+
| `exitOnClose` | `exit-on-close` | Window |
|
|
393
|
+
| `experimental` | `experimental` | Boolean |
|
|
394
|
+
| `extendBackground` | `extend-background` | Switch |
|
|
395
|
+
| `extendEdges` | `extend-edges` | iOS |
|
|
396
|
+
| `extendSafeArea` | `extend-safe-area` | iOS |
|
|
397
|
+
|
|
398
|
+
### F-L
|
|
399
|
+
|
|
400
|
+
| Property | Class Prefix | Notes |
|
|
401
|
+
| --------------------------------------- | -------------------------------------------------- | -------------------------------------- |
|
|
402
|
+
| `fastScroll` | `fast-scroll` | ListView Android |
|
|
403
|
+
| `filterAlwaysInclude` | `filter-always-include` | Picker |
|
|
404
|
+
| `filterAnchored` | `filter-anchored` | Picker |
|
|
405
|
+
| `filterCaseInsensitive` | `filter-case-insensitive` | Picker |
|
|
406
|
+
| `filterTouchesWhenObscured` | `filter-touches-when-obscured` | View |
|
|
407
|
+
| `fixedSize` | `fixed-size` | View |
|
|
408
|
+
| `flags` | `flags` | Notifications |
|
|
409
|
+
| `flagSecure` | `flag-secure` | Android |
|
|
410
|
+
| `focusable` | `focusable` | Boolean |
|
|
411
|
+
| `footerDividersEnabled` | `footer-dividers-enabled` | ListView Android |
|
|
412
|
+
| `forceBottomPosition` | `force-bottom-position` | ScrollView |
|
|
413
|
+
| `forceModal` | `force-modal` | Window |
|
|
414
|
+
| `forceSplashAsSnapshot` | `force-splash-as-snapshot` | Android |
|
|
415
|
+
| `forceTouchSupported` | `force-touch-supported` | iOS |
|
|
416
|
+
| `forceUpdates` | `force-updates` | Notifications |
|
|
417
|
+
| `format` | `format-*` | Date/Time |
|
|
418
|
+
| `format24` | `format24`, `format24-false` | Time format |
|
|
419
|
+
| `frequency` | `frequency-*` | Location updates |
|
|
420
|
+
| `fullscreen` | `fullscreen` | Boolean |
|
|
421
|
+
| `generatedMessage` | `generated-message` | Notifications |
|
|
422
|
+
| `getters` | `getters` | Model |
|
|
423
|
+
| `gravity` | `gravity` | Android |
|
|
424
|
+
| `grouping` | `grouping` | DatePicker/Picker |
|
|
425
|
+
| `groupSummary` | `group-summary` | Notifications Android |
|
|
426
|
+
| `handleLinks` | `handle-links` | Label |
|
|
427
|
+
| `hasAlarm` | `has-alarm` | Calendar events |
|
|
428
|
+
| `hasCheck` | `has-check` | Notifications Android |
|
|
429
|
+
| `hasChild` | `has-child` | Annotations |
|
|
430
|
+
| `hasCompass` | `has-compass` | Geolocation |
|
|
431
|
+
| `hasDetail` | `has-detail` | Notifications Android |
|
|
432
|
+
| `hasProtectedAsset` | `has-protected-asset` | Video |
|
|
433
|
+
| `headerDividersEnabled` | `header-dividers-enabled` | ListView Android |
|
|
434
|
+
| `height` | `h-*` | All components |
|
|
435
|
+
| `hiddenBehavior` | `hidden-behavior` | Tabs Android |
|
|
436
|
+
| `hideLoadIndicator` | `hide-load-indicator` | WebView |
|
|
437
|
+
| `hidesBackButton` | `hides-back-button` | iOS |
|
|
438
|
+
| `hidesBarsOnSwipe` | `hides-bars-on-swipe` | iOS |
|
|
439
|
+
| `hidesBarsOnTap` | `hides-bars-on-tap` | iOS |
|
|
440
|
+
| `hidesBarsWhenKeyboardAppears` | `hides-bars-when-keyboard-appears` | iOS |
|
|
441
|
+
| `hideSearchOnSelection` | `hide-search-on-selection` | SearchBar |
|
|
442
|
+
| `hideShadow` | `hide-shadow` | iOS |
|
|
443
|
+
| `hidesSearchBarWhenScrolling` | `hides-search-bar-when-scrolling` | iOS |
|
|
444
|
+
| `highlightedColor` | `highlighted-*` | TableView/ListView |
|
|
445
|
+
| `hintTextColor` | `hint-*` | TextField |
|
|
446
|
+
| `hintType` | `hint-type` | TextField |
|
|
447
|
+
| `hires` | `hires` | Boolean |
|
|
448
|
+
| `homeButtonEnabled` | `home-button-enabled` | Android |
|
|
449
|
+
| `homeIndicatorAutoHidden` | `home-indicator-auto-hidden` | iOS |
|
|
450
|
+
| `horizontalBounce` | `horizontal-bounce` | ScrollView |
|
|
451
|
+
| `horizontalMargin` | `horizontal-margin` | TableView |
|
|
452
|
+
| `horizontalWrap` | `horizontal-wrap` | DashboardView |
|
|
453
|
+
| `hour12` | `hour12`, `hour12-false` | Time format |
|
|
454
|
+
| `html` | `html`, `html-false` | WebView |
|
|
455
|
+
| `httponly` | `httponly`, `httponly-false` | Cookie |
|
|
456
|
+
| `hyphenationFrequency` | `hyphenation-frequency` | Android TextView |
|
|
457
|
+
| `icon` | `icon-*` | Tab/Notifications |
|
|
458
|
+
| `iconColor` | `icon-*` | Tab |
|
|
459
|
+
| `iconified` | `iconified` | Boolean |
|
|
460
|
+
| `iconifiedByDefault` | `iconified-by-default` | SearchBar |
|
|
461
|
+
| `iconIsMask` | `icon-is-mask` | Tab |
|
|
462
|
+
| `idleTimerDisabled` | `idle-timer-disabled` | iOS |
|
|
463
|
+
| `ignorePunctuation` | `ignore-punctuation` | SearchBar |
|
|
464
|
+
| `ignoreSslError` | `ignore-ssl-error` | WebView |
|
|
465
|
+
| `imageHeight` | `image-h-*` | ImageView |
|
|
466
|
+
| `imageIsMask` | `image-is-mask` | ImageView |
|
|
467
|
+
| `imagePadding` | `image-padding` | Button |
|
|
468
|
+
| `imageTouchFeedback` | `image-touch-feedback` | Android |
|
|
469
|
+
| `imageTouchFeedbackColor` | `image-touch-feedback-*` | Android |
|
|
470
|
+
| `importance` | `importance` | Notifications |
|
|
471
|
+
| `inBackground` | `in-background` | Audio player |
|
|
472
|
+
| `includeFontPadding` | `include-font-padding` | Android TextView |
|
|
473
|
+
| `includeNote` | `include-note` | Calendar events |
|
|
474
|
+
| `includeOpaqueBars` | `include-opaque-bars` | iOS |
|
|
475
|
+
| `indentionLevel` | `indention-level-*` | ListView |
|
|
476
|
+
| `indicatorColor` | `indicator-*` | ScrollView |
|
|
477
|
+
| `injectionTime` | `injection-time` | Android |
|
|
478
|
+
| `inPopOver` | `in-pop-over` | iOS |
|
|
479
|
+
| `inputs` | `inputs-*` | Media capture |
|
|
480
|
+
| `inputType` | `input-type` | Android TextField |
|
|
481
|
+
| `interactive` | `interactive` | Boolean |
|
|
482
|
+
| `interactiveDismissModeEnabled` | `interactive-dismiss-mode-enabled` | iOS |
|
|
483
|
+
| `isCameraSupported` | `is-camera-supported` | Camera |
|
|
484
|
+
| `isCloudItem` | `is-cloud-item` | Asset |
|
|
485
|
+
| `isCompilation` | `is-compilation` | Media |
|
|
486
|
+
| `isDetached` | `is-detached` | Window |
|
|
487
|
+
| `isExplicit` | `is-explicit` | Media |
|
|
488
|
+
| `isLeftOpen` | `is-left-open` | Navigation |
|
|
489
|
+
| `isLeftVisible` | `is-left-visible` | Navigation |
|
|
490
|
+
| `isLocal` | `is-local` | Asset |
|
|
491
|
+
| `isOrganizer` | `is-organizer` | Calendar events |
|
|
492
|
+
| `isRightOpen` | `is-right-open` | Navigation |
|
|
493
|
+
| `isRightVisible` | `is-right-visible` | Navigation |
|
|
494
|
+
| `isSearching` | `is-searching` | SearchBar |
|
|
495
|
+
| `isTranslatedBinaryOnAppleSilicon` | `is-translated-binary-on-apple-silicon` | iOS |
|
|
496
|
+
| `itemContentType` | `item-content-type` | Notifications |
|
|
497
|
+
| `javaScriptCanOpenWindowsAutomatically` | `java-script-can-open-windows-automatically` | WebView |
|
|
498
|
+
| `javaScriptEnabled` | `java-script-enabled` | WebView |
|
|
499
|
+
| `keepScreenOn` | `keep-screen-on` | Android |
|
|
500
|
+
| `keepSectionsInSearch` | `keep-sections-in-search` | TableView |
|
|
501
|
+
| `keyboardAppearance` | `keyboard-appearance-*` | TextField |
|
|
502
|
+
| `keyboardDismissMode` | `keyboard-dismiss-mode` | TableView/ScrollView |
|
|
503
|
+
| `keyboardDisplayRequiresUserAction` | `keyboard-display-requires-user-action` | iOS WebView |
|
|
504
|
+
| `keyboardToolbarColor` | `keyboard-toolbar-*` | TextField iOS |
|
|
505
|
+
| `keyboardToolbarHeight` | `keyboard-toolbar-h-*` | TextField iOS |
|
|
506
|
+
| `keyboardType` | `keyboard-type-*` | TextField |
|
|
507
|
+
| `keyboardVisible` | `keyboard-visible`, `keyboard-visible-false` | TextField |
|
|
508
|
+
| `kind` | `kind` | Notifications |
|
|
509
|
+
| `largeTitleDisplayMode` | `large-title-display-mode` | iOS |
|
|
510
|
+
| `largeTitleEnabled` | `large-title-enabled`, `large-title-enabled-false` | iOS |
|
|
511
|
+
| `launchOptionsLocationKey` | `launch-options-location-key` | iOS |
|
|
512
|
+
| `layerType` | `layer-type` | Android View |
|
|
513
|
+
| `layout` | `layout` | View (composite, horizontal, vertical) |
|
|
514
|
+
| `lazyLoadingEnabled` | `lazy-loading-enabled` | ListView Android |
|
|
515
|
+
| `left` | `left-*` | Positioning |
|
|
516
|
+
| `leftButtonMode` | `left-button-mode` | TextField |
|
|
517
|
+
| `leftButtonPadding` | `left-button-padding` | TextField |
|
|
518
|
+
| `leftDrawerLockMode` | `left-drawer-lock-mode` | Navigation |
|
|
519
|
+
| `leftTrackLeftCap` | `left-track-left-cap` | Slider |
|
|
520
|
+
| `leftTrackTopCap` | `left-track-top-cap` | Slider |
|
|
521
|
+
| `leftWidth` | `left-width` | Slider |
|
|
522
|
+
| `letterSpacing` | `letter-spacing-*` | Label |
|
|
523
|
+
| `lightColor` | `light-*` | Notification |
|
|
524
|
+
| `lightTouchEnabled` | `light-touch-enabled` | Android ListView |
|
|
525
|
+
| `lineBreakMode` | `line-break-mode-*` | Label |
|
|
526
|
+
| `lineHeightMultiple` | `line-h-multiple-*` | Label |
|
|
527
|
+
| `lines` | `lines-*` | Label |
|
|
528
|
+
| `lineSpacing` | `line-spacing-*` | Label |
|
|
529
|
+
| `loading` | `loading` | Boolean |
|
|
530
|
+
| `location` | `location-*` | Annotations |
|
|
531
|
+
| `locationAccuracyAuthorization` | `location-accuracy-authorization` | Location |
|
|
532
|
+
| `locationServicesAuthorization` | `location-services-authorization` | Location |
|
|
533
|
+
| `locationServicesEnabled` | `location-services-enabled` | Geolocation |
|
|
534
|
+
| `lockScreenSetting` | `lock-screen-setting` | Notifications |
|
|
535
|
+
| `lockscreenVisibility` | `lockscreen-visibility` | Notifications |
|
|
536
|
+
| `loginKeyboardType` | `login-keyboard-type` | TextField |
|
|
537
|
+
| `loginReturnKeyType` | `login-return-key-type` | TextField |
|
|
538
|
+
| `looping` | `looping` | Boolean |
|
|
539
|
+
|
|
540
|
+
### M-P
|
|
541
|
+
|
|
542
|
+
| Property | Class Prefix | Notes |
|
|
543
|
+
| ------------------------------------------ | ------------------------------------------------ | ------------------------ |
|
|
544
|
+
| `mainFrameOnly` | `main-frame-only` | WebView |
|
|
545
|
+
| `manualMode` | `manual-mode` | Geolocation |
|
|
546
|
+
| `masterIsOverlayed` | `master-is-overlayed` | SplitWindow |
|
|
547
|
+
| `masterViewVisible` | `master-view-visible` | SplitWindow |
|
|
548
|
+
| `maxElevation` | `max-elevation` | Android |
|
|
549
|
+
| `maxImages` | `max-images` | Email |
|
|
550
|
+
| `maximumLineHeight` | `maximum-line-height-*` | Label |
|
|
551
|
+
| `maxLines` | `max-lines-*` | Label |
|
|
552
|
+
| `maxRowHeight` | `max-row-height` | TableView |
|
|
553
|
+
| `maxZoomScale` | `max-zoom-scale` | ScrollView |
|
|
554
|
+
| `mediaType` | `media-type` | Camera/Video |
|
|
555
|
+
| `mediaTypes` | `media-types` | Media picker |
|
|
556
|
+
| `mediaTypesRequiringUserActionForPlayback` | `media-types-requiring-user-action-for-playback` | Video |
|
|
557
|
+
| `method` | `method-*` | HTTP |
|
|
558
|
+
| `minimizeBehavior` | `minimize-behavior` | iOS Picture-in-Picture |
|
|
559
|
+
| `minimumLineHeight` | `minimum-line-height-*` | Label |
|
|
560
|
+
| `minRowHeight` | `min-row-height` | TableView |
|
|
561
|
+
| `minZoomScale` | `min-zoom-scale` | ScrollView |
|
|
562
|
+
| `mixedContentMode` | `mixed-content-mode` | Android WebView |
|
|
563
|
+
| `modal` | `modal` | Boolean |
|
|
564
|
+
| `modalStyle` | `modal-style` | iOS |
|
|
565
|
+
| `modalTransitionStyle` | `modal-transition-style` | iOS |
|
|
566
|
+
| `mode` | `mode-*` | Various components |
|
|
567
|
+
| `moveable` | `moveable` | Boolean |
|
|
568
|
+
| `moviePlayerStatus` | `movie-player-status` | Video player |
|
|
569
|
+
| `moving` | `moving` | Boolean |
|
|
570
|
+
| `multipleWindows` | `multiple-windows` | Android |
|
|
571
|
+
| `nativeSpinner` | `native-spinner` | RefreshControl |
|
|
572
|
+
| `navBarColor` | `nav-bar-*` | Android |
|
|
573
|
+
| `navBarHidden` | `nav-bar-hidden` | iOS |
|
|
574
|
+
| `navigationIconColor` | `navigation-icon-*` | Android Toolbar |
|
|
575
|
+
| `navTintColor` | `nav-tint-*` | iOS |
|
|
576
|
+
| `needsSave` | `needs-save` | Event |
|
|
577
|
+
| `networkType` | `network-type` | Email |
|
|
578
|
+
| `noDeprecation` | `no-deprecation` | Geolocation |
|
|
579
|
+
| `notificationCenterSetting` | `notification-center-setting` | Notifications iOS |
|
|
580
|
+
| `numeric` | `numeric` | Boolean |
|
|
581
|
+
| `online` | `online` | Boolean |
|
|
582
|
+
| `onThumbColor` | `on-thumb-*` | Switch |
|
|
583
|
+
| `onTintColor` | `on-*` | Switch |
|
|
584
|
+
| `opacity` | `opacity-*` | All components |
|
|
585
|
+
| `opaque` | `opaque` | Boolean |
|
|
586
|
+
| `opaquebackground` | `opaquebackground` | Boolean |
|
|
587
|
+
| `options` | `options-*` | Option dialog |
|
|
588
|
+
| `outputs` | `outputs-*` | Media capture |
|
|
589
|
+
| `overlayEnabled` | `overlay-enabled`, `overlay-enabled-false` | iOS |
|
|
590
|
+
| `overrideCurrentAnimation` | `override-current-animation` | Navigation |
|
|
591
|
+
| `overrideUserInterfaceStyle` | `override-user-interface-style` | iOS |
|
|
592
|
+
| `overScrollMode` | `over-scroll-mode` | Android ScrollView |
|
|
593
|
+
| `padding` | `padding-*` | All directional paddings |
|
|
594
|
+
| `paddingBottom` | `padding-bottom-*` | Alternative to `pb-*` |
|
|
595
|
+
| `paddingLeft` | `padding-left-*` | Alternative to `pl-*` |
|
|
596
|
+
| `paddingRight` | `padding-right-*` | Alternative to `pr-*` |
|
|
597
|
+
| `paddingTop` | `padding-top-*` | Alternative to `pt-*` |
|
|
598
|
+
| `pageHeight` | `page-height` | ScrollView |
|
|
599
|
+
| `pageIndicatorColor` | `page-indicator-*` | ScrollView |
|
|
600
|
+
| `pageWidth` | `page-width` | ScrollView |
|
|
601
|
+
| `pagingControlAlpha` | `paging-control-alpha` | ScrollView |
|
|
602
|
+
| `pagingControlColor` | `paging-control-*` | ScrollView |
|
|
603
|
+
| `pagingControlHeight` | `paging-control-height` | ScrollView |
|
|
604
|
+
| `pagingControlOnTop` | `paging-control-on-top` | ScrollView |
|
|
605
|
+
| `pagingControlTimeout` | `paging-control-timeout` | ScrollView |
|
|
606
|
+
| `paragraphSpacingAfter` | `paragraph-spacing-after-*` | Label |
|
|
607
|
+
| `paragraphSpacingBefore` | `paragraph-spacing-before-*` | Label |
|
|
608
|
+
| `passwordKeyboardType` | `password-keyboard-type` | TextField |
|
|
609
|
+
| `passwordMask` | `password-mask` | TextField |
|
|
610
|
+
| `passwordReturnKeyType` | `password-return-key-type` | TextField |
|
|
611
|
+
| `pathOnly` | `path-only` | File |
|
|
612
|
+
| `pauseLocationUpdateAutomatically` | `pause-location-update-automatically` | Location |
|
|
613
|
+
| `persistent` | `persistent` | Boolean |
|
|
614
|
+
| `physicalSizeCategory` | `physical-size-category` | iOS |
|
|
615
|
+
| `pictureInPictureEnabled` | `picture-in-picture-enabled` | iOS |
|
|
616
|
+
| `playbackState` | `playback-state` | Audio/Video |
|
|
617
|
+
| `pluginState` | `plugin-state` | Android WebView |
|
|
618
|
+
| `position` | `position-*` | All components |
|
|
619
|
+
| `preventCornerOverlap` | `prevent-corner-overlap` | Android |
|
|
620
|
+
| `preventDefaultImage` | `prevent-default-image` | WebView |
|
|
621
|
+
| `providesAppNotificationSettings` | `provides-app-notification-settings` | Notifications iOS |
|
|
622
|
+
| `proximityDetection` | `proximity-detection` | Proximity sensor |
|
|
623
|
+
| `proximityState` | `proximity-state` | Proximity sensor |
|
|
624
|
+
| `pruneSectionsOnEdit` | `prune-sections-on-edit` | TableView |
|
|
625
|
+
| `pullBackgroundColor` | `pull-bg-*` | RefreshControl |
|
|
626
|
+
| `pushMode` | `push-mode` | Notifications |
|
|
627
|
+
|
|
628
|
+
### R-Z
|
|
629
|
+
|
|
630
|
+
| Property | Class Prefix | Notes |
|
|
631
|
+
| --------------------------------- | ---------------------------------------------- | --------------------------- |
|
|
632
|
+
| `readyState` | `ready-state` | XMLHttpRequest |
|
|
633
|
+
| `recording` | `recording` | Boolean |
|
|
634
|
+
| `remoteNotificationsEnabled` | `remote-notifications-enabled` | Notifications |
|
|
635
|
+
| `repeat` | `repeat-*` | Animation |
|
|
636
|
+
| `repeatCount` | `repeat-count-*` | Animation |
|
|
637
|
+
| `repeatMode` | `repeat-mode` | Android |
|
|
638
|
+
| `requestedOrientation` | `requested-orientation` | Android |
|
|
639
|
+
| `requiresEditingToMove` | `requires-editing-to-move` | iOS |
|
|
640
|
+
| `resultsBackgroundColor` | `results-bg-*` | SearchBar |
|
|
641
|
+
| `resultsSeparatorColor` | `results-separator-*` | SearchBar |
|
|
642
|
+
| `resultsSeparatorStyle` | `results-separator-style` | SearchBar |
|
|
643
|
+
| `returnKeyType` | `return-key-type-*` | TextField |
|
|
644
|
+
| `reverse` | `reverse` | Boolean |
|
|
645
|
+
| `right` | `right-*` | Positioning |
|
|
646
|
+
| `rightButtonMode` | `right-button-mode` | TextField |
|
|
647
|
+
| `rightButtonPadding` | `right-button-padding` | TextField |
|
|
648
|
+
| `rightDrawerLockMode` | `right-drawer-lock-mode` | Navigation |
|
|
649
|
+
| `rightTrackLeftCap` | `right-track-left-cap` | Slider |
|
|
650
|
+
| `rightTrackTopCap` | `right-track-top-cap` | Slider |
|
|
651
|
+
| `rightWidth` | `right-width` | Slider |
|
|
652
|
+
| `role` | `role-*` | Accessibility |
|
|
653
|
+
| `rotate` | `rotate-*` | 2D Matrix |
|
|
654
|
+
| `rowCount` | `row-count` | Picker |
|
|
655
|
+
| `rowHeight` | `row-height` | TableView |
|
|
656
|
+
| `running` | `running` | Boolean |
|
|
657
|
+
| `saveToPhotoGallery` | `save-to-photo-gallery` | Camera |
|
|
658
|
+
| `scale` | `scale-*` | 2D Matrix |
|
|
659
|
+
| `scalesPageToFit` | `scales-page-to-fit` | WebView |
|
|
660
|
+
| `scaleX` | `scale-x-*` | 2D Matrix |
|
|
661
|
+
| `scaleY` | `scale-y-*` | 2D Matrix |
|
|
662
|
+
| `scalingMode` | `scaling-mode` | ImageView |
|
|
663
|
+
| `scrollable` | `scrollable` | Boolean |
|
|
664
|
+
| `scrollbars` | `scrollbars-*` | ScrollView Android |
|
|
665
|
+
| `scrollIndicatorStyle` | `scroll-indicator-style` | iOS |
|
|
666
|
+
| `scrollingEnabled` | `scrolling-enabled`, `scrolling-enabled-false` | ScrollView |
|
|
667
|
+
| `scrollsToTop` | `scrolls-to-top` | ScrollView |
|
|
668
|
+
| `searchAsChild` | `search-as-child` | SearchBar |
|
|
669
|
+
| `searchHidden` | `search-hidden` | SearchBar |
|
|
670
|
+
| `sectionHeaderTopPadding` | `section-header-top-padding` | TableView |
|
|
671
|
+
| `secure` | `secure` | Boolean |
|
|
672
|
+
| `selected` | `selected`, `selected-*` | Boolean + color variants |
|
|
673
|
+
| `selectedBackgroundColor` | `selected-bg-*` | TableView/ListView |
|
|
674
|
+
| `selectedBorderColor` | `selected-border-*` | Button |
|
|
675
|
+
| `selectedButtonColor` | `selected-button-*` | Button |
|
|
676
|
+
| `selectedColor` | `selected-*` | Tab/TableView |
|
|
677
|
+
| `selectedSubtitleColor` | `selected-subtitle-*` | Android |
|
|
678
|
+
| `selectedTextColor` | `selected-text-*` | TableView |
|
|
679
|
+
| `selectionGranularity` | `selection-granularity` | iOS TextView |
|
|
680
|
+
| `selectionIndicator` | `selection-indicator` | Various |
|
|
681
|
+
| `selectionLimit` | `selection-limit` | Picker |
|
|
682
|
+
| `selectionOpens` | `selection-opens` | Picker |
|
|
683
|
+
| `selectionStyle` | `selection-style` | TableView |
|
|
684
|
+
| `separatorColor` | `separator-*` | TableView/ListView |
|
|
685
|
+
| `separatorHeight` | `separator-height` | TableView |
|
|
686
|
+
| `separatorStyle` | `separator-style` | TableView |
|
|
687
|
+
| `severity` | `severity` | Notifications Android |
|
|
688
|
+
| `shadowColor` | `shadow-*` | View |
|
|
689
|
+
| `shadowRadius` | `shadow-radius-*` | View |
|
|
690
|
+
| `shiftMode` | `shift-mode` | DatePicker |
|
|
691
|
+
| `showAsAction` | `show-as-action` | Android |
|
|
692
|
+
| `showBackgroundLocationIndicator` | `show-background-location-indicator` | Location iOS |
|
|
693
|
+
| `showBadge` | `show-badge` | Notifications Android |
|
|
694
|
+
| `showBookmark` | `show-bookmark` | Video player |
|
|
695
|
+
| `showCalibration` | `show-calibration` | Camera |
|
|
696
|
+
| `showCancel` | `show-cancel` | SearchBar |
|
|
697
|
+
| `showControls` | `show-controls` | Video player |
|
|
698
|
+
| `showHidden` | `show-hidden` | SearchBar |
|
|
699
|
+
| `showHorizontalScrollIndicator` | `show-horizontal-scroll-indicator` | ScrollView |
|
|
700
|
+
| `showMasterInPortrait` | `show-master-in-portrait` | SplitWindow |
|
|
701
|
+
| `showPagingControl` | `show-paging-control` | ScrollView |
|
|
702
|
+
| `showProxy` | `show-proxy` | HTTP |
|
|
703
|
+
| `showsControls` | `shows-controls` | Video player |
|
|
704
|
+
| `showSearchBarInNavBar` | `show-search-bar-in-nav-bar` | iOS |
|
|
705
|
+
| `showSelectionCheck` | `show-selection-check` | Picker |
|
|
706
|
+
| `showUndoRedoActions` | `show-undo-redo-actions` | iOS |
|
|
707
|
+
| `showVerticalScrollIndicator` | `show-vertical-scroll-indicator` | ScrollView |
|
|
708
|
+
| `shuffleMode` | `shuffle-mode` | Audio |
|
|
709
|
+
| `smoothScrollOnTabClick` | `smooth-scroll-on-tab-click` | Tab Android |
|
|
710
|
+
| `softKeyboardOnFocus` | `soft-keyboard-on-focus` | TextField |
|
|
711
|
+
| `sorted` | `sorted` | Boolean |
|
|
712
|
+
| `soundSetting` | `sound-setting` | Notifications |
|
|
713
|
+
| `sourceType` | `source-type` | Camera/Media |
|
|
714
|
+
| `splitTrack` | `split-track` | Switch Android |
|
|
715
|
+
| `startMode` | `start-mode` | Notification |
|
|
716
|
+
| `state` | `state-*` | Notifications |
|
|
717
|
+
| `status` | `status` | Various |
|
|
718
|
+
| `statusBarBackgroundColor` | `status-bar-bg-*` | iOS |
|
|
719
|
+
| `statusBarColor` | `status-bar-*` | Android |
|
|
720
|
+
| `statusBarHeight` | `status-bar-height` | iOS |
|
|
721
|
+
| `statusBarStyle` | `status-bar-style` | iOS |
|
|
722
|
+
| `stopped` | `stopped` | Boolean |
|
|
723
|
+
| `style` | `style-*` | Various components |
|
|
724
|
+
| `submitEnabled` | `submit-enabled`, `submit-enabled-false` | TextField |
|
|
725
|
+
| `subtitleColor` | `subtitle-*` | Android Toolbar |
|
|
726
|
+
| `subtitleTextColor` | `subtitle-text-*` | Tab |
|
|
727
|
+
| `success` | `success` | Boolean |
|
|
728
|
+
| `suppressesIncrementalRendering` | `suppresses-incremental-rendering` | WebView iOS |
|
|
729
|
+
| `suppressReturn` | `suppress-return` | TextField |
|
|
730
|
+
| `sustainedPerformanceMode` | `sustained-performance-mode` | Android |
|
|
731
|
+
| `swipeable` | `swipeable` | Boolean |
|
|
732
|
+
| `swipeToClose` | `swipe-to-close` | Navigation |
|
|
733
|
+
| `systemButton` | `system-button` | Button |
|
|
734
|
+
| `tabBarHidden` | `tab-bar-hidden` | iOS |
|
|
735
|
+
| `tabBarVisible` | `tab-bar-visible` | Android |
|
|
736
|
+
| `tabMode` | `tab-mode` | Tab Android |
|
|
737
|
+
| `tabsBackgroundColor` | `tabs-bg-*` | Tab |
|
|
738
|
+
| `tabsBackgroundSelectedColor` | `tabs-background-selected-*` | Tab |
|
|
739
|
+
| `tabsTranslucent` | `tabs-translucent` | iOS |
|
|
740
|
+
| `targetImageHeight` | `target-image-height` | Email |
|
|
741
|
+
| `targetImageWidth` | `target-image-width` | Email |
|
|
742
|
+
| `textAlign` | `text-*` | Label (left, center, right) |
|
|
743
|
+
| `textStyle` | `text-style` | Label |
|
|
744
|
+
| `thumbColor` | `thumb-*` | Slider/Switch |
|
|
745
|
+
| `thumbTintColor` | `thumb-tint-*` | Slider iOS |
|
|
746
|
+
| `timeout` | `timeout-*` | HTTP/Animation |
|
|
747
|
+
| `tint` | `tint-*` | Button/Tab |
|
|
748
|
+
| `titleColor` | `title-*` | All components |
|
|
749
|
+
| `titlePadding` | `title-padding` | Button |
|
|
750
|
+
| `titleTextColor` | `title-text-*` | Button/Tab |
|
|
751
|
+
| `tlsVersion` | `tls-version` | HTTP |
|
|
752
|
+
| `toolbarEnabled` | `toolbar-enabled`, `toolbar-enabled-false` | iOS |
|
|
753
|
+
| `top` | `top-*` | Positioning |
|
|
754
|
+
| `torch` | `torch` | Camera |
|
|
755
|
+
| `touchEnabled` | `touch-enabled`, `touch-enabled-false` | All components |
|
|
756
|
+
| `touchFeedback` | `touch-feedback` | Android |
|
|
757
|
+
| `touchFeedbackColor` | `touch-feedback-*` | Android |
|
|
758
|
+
| `traceDeprecation` | `trace-deprecation` | Logging |
|
|
759
|
+
| `trackSignificantLocationChange` | `track-significant-location-change` | Location |
|
|
760
|
+
| `trackTintColor` | `track-tint-*` | Slider/Progress |
|
|
761
|
+
| `trackUserInteraction` | `track-user-interaction` | Analytics |
|
|
762
|
+
| `transition` | `transition-*` | Navigation |
|
|
763
|
+
| `translucent` | `translucent` | Boolean |
|
|
764
|
+
| `treatReferenceAsBoundary` | `treat-reference-as-boundary` | Annotations |
|
|
765
|
+
| `type` | `type-*` | Various |
|
|
766
|
+
| `unique` | `unique` | Boolean |
|
|
767
|
+
| `updateCurrentIntent` | `update-current-intent` | Notifications Android |
|
|
768
|
+
| `uprightHeight` | `upright-height` | Safe area |
|
|
769
|
+
| `uprightWidth` | `upright-width` | Safe area |
|
|
770
|
+
| `useCameraX` | `use-camera-x` | Camera Android |
|
|
771
|
+
| `useCompatPadding` | `use-compat-padding` | Android |
|
|
772
|
+
| `useGrouping` | `use-grouping` | Picker |
|
|
773
|
+
| `userInterfaceStyle` | `user-interface-style` | iOS |
|
|
774
|
+
| `useSpinner` | `use-spinner` | RefreshControl |
|
|
775
|
+
| `validatesSecureCertificate` | `validates-secure-certificate` | HTTP |
|
|
776
|
+
| `validRow` | `valid-row` | TableView |
|
|
777
|
+
| `value` | `value-*` | Various |
|
|
778
|
+
| `verticalAlign` | `vertical-align` | Label |
|
|
779
|
+
| `verticalBounce` | `vertical-bounce` | ScrollView |
|
|
780
|
+
| `verticalMargin` | `vertical-margin` | TableView |
|
|
781
|
+
| `videoQuality` | `video-quality` | Camera |
|
|
782
|
+
| `View` | (default) | Base component styles |
|
|
783
|
+
| `viewShadowColor` | `view-shadow-*` | Android |
|
|
784
|
+
| `visibility` | `visibility` | Android |
|
|
785
|
+
| `visible` | `visible`, `visible-false`, `hidden` | All components |
|
|
786
|
+
| `waitsForConnectivity` | `waits-for-connectivity` | Notifications |
|
|
787
|
+
| `whichCamera` | `which-camera` | Camera |
|
|
788
|
+
| `width` | `w-*` | All components |
|
|
789
|
+
| `willHandleTouches` | `will-handles-touches` | ScrollView |
|
|
790
|
+
| `willScrollOnStatusTap` | `will-scroll-on-status-tap` | iOS |
|
|
791
|
+
| `Window` | (default) | Base component styles |
|
|
792
|
+
| `windowPixelFormat` | `window-pixel-format` | Android |
|
|
793
|
+
| `windowSoftInputMode` | `window-soft-input-mode` | Android |
|
|
794
|
+
| `wobble` | `wobble` | Boolean |
|
|
795
|
+
| `wraps` | `wraps` | Boolean |
|
|
796
|
+
| `xOffset` | `x-offset` | ScrollView |
|
|
797
|
+
| `yOffset` | `y-offset` | ScrollView |
|
|
798
|
+
| `zIndex` | `z-index-*` | All components |
|
|
799
|
+
| `zoomEnabled` | `zoom-enabled`, `zoom-enabled-false` | ScrollView/WebView |
|
|
800
|
+
| `zoomScale` | `zoom-scale-*` | ScrollView |
|
|
801
|
+
|
|
802
|
+
---
|
|
803
|
+
|
|
804
|
+
## Class Categories by Prefix (Complete Inventory)
|
|
805
|
+
|
|
806
|
+
### Layout & Structure
|
|
807
|
+
|
|
808
|
+
| Prefix | Count | Examples |
|
|
809
|
+
| ------------- | ----- | -------------------------------------------------------- |
|
|
810
|
+
| `horizontal` | 1 | `horizontal` |
|
|
811
|
+
| `vertical` | 1 | `vertical` |
|
|
812
|
+
| `composite` | 1 | `composite` (default, omit class) |
|
|
813
|
+
| `grid` | 1 | `grid` |
|
|
814
|
+
| `grid-cols-*` | ~12 | `grid-cols-2`, `grid-cols-3`, etc. |
|
|
815
|
+
| `col-*` | ~24 | `col-1/2`, `col-2/3`, etc. (percentages) |
|
|
816
|
+
| `row-*` | ~55 | `row-*` (grid row related) |
|
|
817
|
+
| `wh-` | ~60 | `wh-0`, `wh-auto`, `wh-screen`, `wh-full`, `wh-1/2` |
|
|
818
|
+
| `w-` | ~60 | `w-0` to `w-96`, `w-auto`, `w-screen`, `w-full`, `w-1/2` |
|
|
819
|
+
| `h-` | ~60 | `h-0` to `h-96`, `h-auto`, `h-screen`, `h-full`, `h-1/2` |
|
|
820
|
+
| `content-*` | ~20 | `content-h-*`, `content-w-*` |
|
|
821
|
+
| `aspect-*` | 2 | `aspect-ratio-16-9`, `aspect-ratio-4-3` |
|
|
822
|
+
|
|
823
|
+
**Important: `w-full` vs `w-screen`**
|
|
824
|
+
- `w-full` → `width: '100%'` — 100% of parent container
|
|
825
|
+
- `w-screen` → `width: Ti.UI.FILL` — Fills all available space in parent
|
|
826
|
+
- `h-full` → `height: '100%'` — 100% of parent container
|
|
827
|
+
- `h-screen` → `height: Ti.UI.FILL` — Fills all available space in parent
|
|
828
|
+
- `wh-full` → Both `'100%'` |
|
|
829
|
+
|
|
830
|
+
### Spacing (Margins & Padding)
|
|
831
|
+
|
|
832
|
+
| Prefix | Count | Examples |
|
|
833
|
+
| ----------- | ----- | --------------------------------------------------- |
|
|
834
|
+
| `m-` | ~80 | `m-0` to `m-96`, `m-auto`, `m-1/2`, `m-px`, `m-0.5` |
|
|
835
|
+
| `mt-` | ~80 | `mt-0` to `mt-96`, `mt-auto`, `mt-1/2`, `mt-px` |
|
|
836
|
+
| `mb-` | ~80 | `mb-0` to `mb-96`, `mb-auto`, `mb-1/2`, `mb-px` |
|
|
837
|
+
| `ml-` | ~80 | `ml-0` to `ml-96`, `ml-auto`, `ml-1/2`, `ml-px` |
|
|
838
|
+
| `mr-` | ~80 | `mr-0` to `mr-96`, `mr-auto`, `mr-1/2`, `mr-px` |
|
|
839
|
+
| `mx-` | ~80 | `mx-0` to `mx-96`, `mx-auto`, `mx-1/2`, `mx-px` |
|
|
840
|
+
| `my-` | ~80 | `my-0` to `my-96`, `my-auto`, `my-1/2`, `my-px` |
|
|
841
|
+
| `p-` | ~80 | `p-0` to `p-96`, `p-auto`, `p-1/2`, `p-px` |
|
|
842
|
+
| `pt-` | ~80 | `pt-0` to `pt-96`, `pt-auto`, `pt-1/2`, `pt-px` |
|
|
843
|
+
| `pb-` | ~80 | `pb-0` to `pb-96`, `pb-auto`, `pb-1/2`, `pb-px` |
|
|
844
|
+
| `pl-` | ~80 | `pl-0` to `pl-96`, `pl-auto`, `pl-1/2`, `pl-px` |
|
|
845
|
+
| `pr-` | ~80 | `pr-0` to `pr-96`, `pr-auto`, `pr-1/2`, `pr-px` |
|
|
846
|
+
| `px-` | ~80 | `px-0` to `px-96`, `px-auto`, `px-1/2`, `px-px` |
|
|
847
|
+
| `py-` | ~80 | `py-0` to `py-96`, `py-auto`, `py-1/2`, `py-px` |
|
|
848
|
+
| `gap-` | ~60 | `gap-0` to `gap-96`, `gap-px`, fractions |
|
|
849
|
+
| `padding-*` | ~155 | `padding-top-*`, `padding-bottom-*`, etc. |
|
|
850
|
+
|
|
851
|
+
### Positioning
|
|
852
|
+
|
|
853
|
+
| Prefix | Count | Examples |
|
|
854
|
+
| ------------ | ----- | ------------------------------------------------------------------- |
|
|
855
|
+
| `top-` | ~60 | `top-0` to `top-96`, `top-auto`, `top-1/2`, `top-px` |
|
|
856
|
+
| `right-` | ~60 | `right-0` to `right-96`, `right-auto`, `right-1/2`, `right-px` |
|
|
857
|
+
| `bottom-` | ~60 | `bottom-0` to `bottom-96`, `bottom-auto`, `bottom-1/2`, `bottom-px` |
|
|
858
|
+
| `left-` | ~60 | `left-0` to `left-96`, `left-auto`, `left-1/2`, `left-px` |
|
|
859
|
+
| `inset-*` | ~20 | `inset-*` (all sides) |
|
|
860
|
+
| `position-*` | ~5 | Various position utilities |
|
|
861
|
+
|
|
862
|
+
### Colors (Background)
|
|
863
|
+
|
|
864
|
+
| Prefix | Count | Examples |
|
|
865
|
+
| -------------------- | --------- | ------------------------------------------------------------------------------ |
|
|
866
|
+
| `bg-` | **1,688** | `bg-white`, `bg-gray-*` (50-950), all 22 Tailwind colors |
|
|
867
|
+
| | | Each color has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 |
|
|
868
|
+
| | | Plus: `bg-black`, `bg-white`, `bg-transparent`, `bg-translucent` |
|
|
869
|
+
| `active-tint-*` | ~24 | `active-tint-*` (all colors) |
|
|
870
|
+
| `selected-bg-*` | ~264 | `selected-bg-*` (selected state backgrounds) |
|
|
871
|
+
| `badge-bg-*` | ~264 | `badge-bg-*` (badge backgrounds) |
|
|
872
|
+
| `title-bg-*` | ~264 | `title-bg-*` (title backgrounds) |
|
|
873
|
+
| `tabs-bg-*` | ~264 | `tabs-bg-*` (tab backgrounds) |
|
|
874
|
+
| `keyboard-toolbar-*` | ~285 | `keyboard-toolbar-*` colors + heights |
|
|
875
|
+
| `thumb-*` | ~264 | `thumb-*` colors (sliders) |
|
|
876
|
+
| `track-*` | ~264 | `track-*` colors (sliders) |
|
|
877
|
+
| `status-bar-bg-*` | ~264 | `status-bar-bg-*` (status bar) |
|
|
878
|
+
| `nav-*` | ~492 | `nav-bg-*`, `nav-tint-*` (navigation) |
|
|
879
|
+
| `tint-*` | ~490 | `tint-*` colors (UI tinting) |
|
|
880
|
+
| `placeholder-*` | ~245 | `placeholder-*` colors |
|
|
881
|
+
| `hint-*` | ~247 | `hint-*` colors |
|
|
882
|
+
| `subtitle-*` | ~490 | `subtitle-*` colors |
|
|
883
|
+
| `bar-*` | ~245 | `bar-bg-*`, `bar-color-*` |
|
|
884
|
+
| `separator-*` | ~278 | `separator-*` colors |
|
|
885
|
+
| `indicator-*` | ~245 | `indicator-*` colors |
|
|
886
|
+
| `disabled-*` | ~245 | `disabled-*` colors (disabled state) |
|
|
887
|
+
| `highlighted-*` | ~245 | `highlighted-*` colors |
|
|
888
|
+
|
|
889
|
+
### Colors (Text & Foreground)
|
|
890
|
+
|
|
891
|
+
| Prefix | Count | Examples |
|
|
892
|
+
| ------------ | --------- | ------------------------------------------------------------------- |
|
|
893
|
+
| `text-` | **273** | `text-white`, `text-gray-*` (50-950), `text-center/left/right` |
|
|
894
|
+
| | | Text sizes: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl` |
|
|
895
|
+
| `title-*` | **1,019** | `title-*`, `title-attributes-*`, `title-color-*` |
|
|
896
|
+
| `selected-*` | **1,471** | `selected-*`, `selected-bg-*`, `selected-color-*` |
|
|
897
|
+
| `badge-*` | **735** | `badge-*`, `badge-bg-*`, `badge-color-*` |
|
|
898
|
+
| `colors-*` | ~245 | `colors-*` (picker colors) |
|
|
899
|
+
| `color-*` | ~245 | `color-*` variants |
|
|
900
|
+
|
|
901
|
+
### Borders & Radius
|
|
902
|
+
|
|
903
|
+
| Prefix | Count | Examples |
|
|
904
|
+
| ----------- | ------- | ---------------------------------------------------------- |
|
|
905
|
+
| `border-` | **303** | `border-0`, `border-(1)`, `border-gray-*` colors |
|
|
906
|
+
| | | `border-t-*`, `border-r-*`, `border-b-*`, `border-l-*` |
|
|
907
|
+
| `rounded-*` | **455** | `rounded-none`, `rounded-sm`, `rounded-lg` |
|
|
908
|
+
| | | `rounded-full-*` (with size: `rounded-full-12`) |
|
|
909
|
+
| | | `rounded-t-*`, `rounded-r-*`, `rounded-b-*`, `rounded-l-*` |
|
|
910
|
+
|
|
911
|
+
### Typography
|
|
912
|
+
|
|
913
|
+
| Prefix | Count | Examples |
|
|
914
|
+
| --------------------- | ----- | ------------------------------------------------------------ |
|
|
915
|
+
| `text-*` | 273 | Text colors, sizes, alignment |
|
|
916
|
+
| `font-*` | 9 | `font-thin`, `font-light`, `font-normal`, `font-medium` |
|
|
917
|
+
| | | `font-semibold`, `font-bold`, `font-extrabold`, `font-black` |
|
|
918
|
+
| `line-h-multiple-*` | ~85 | Line height as multiple |
|
|
919
|
+
| `line-spacing-*` | ~85 | Line spacing |
|
|
920
|
+
| `line-break-mode-*` | 7 | `line-break-mode-attribute-by-word-wrapping`, etc. |
|
|
921
|
+
| `letter-spacing-*` | ~85 | Letter spacing values |
|
|
922
|
+
| `paragraph-spacing-*` | ~120 | Paragraph spacing |
|
|
923
|
+
| `ellipsize-*` | ~18 | `ellipsize-*` (text truncation) |
|
|
924
|
+
|
|
925
|
+
### Accessibility
|
|
926
|
+
|
|
927
|
+
| Prefix | Count | Examples |
|
|
928
|
+
| ----------------- | ----- | ---------------------------------------------------------------------------- |
|
|
929
|
+
| `accessibility-*` | 7 | `accessibility-enabled`, `accessibility-enabled-false` |
|
|
930
|
+
| | | `accessibility-hidden`, `accessibility-hidden-false` |
|
|
931
|
+
| | | `accessibility-disable-long-press`, `accessibility-disable-long-press-false` |
|
|
932
|
+
|
|
933
|
+
### Input & Keyboard
|
|
934
|
+
|
|
935
|
+
| Prefix | Count | Examples |
|
|
936
|
+
| ----------------------- | ------- | -------------------------------------------------------------------------- |
|
|
937
|
+
| `keyboard-*` | **297** | `keyboard-type-*`, `keyboard-appearance-*` |
|
|
938
|
+
| `keyboard-type-*` | 11 | `email`, `number-pad`, `phone-pad`, `url`, `decimal-pad` |
|
|
939
|
+
| | | `twitter`, `websearch`, `ascii`, `namephone-pad` |
|
|
940
|
+
| | | `numbers-punctuation` |
|
|
941
|
+
| `return-key-type-*` | 12 | `next`, `done`, `go`, `search`, `send`, `continue` |
|
|
942
|
+
| | | `route`, `join`, `yahoo`, `google`, `emergency-call`, `returnkey` |
|
|
943
|
+
| `keyboard-appearance-*` | 3 | `keyboard-appearance`, `dark`, `light` |
|
|
944
|
+
| `keyboard-toolbar-*` | ~285 | `keyboard-toolbar-*` (colors, heights) |
|
|
945
|
+
| `keyboard-visible-*` | 2 | `keyboard-visible`, `keyboard-visible-false` |
|
|
946
|
+
| `autocapitalization-*` | 4 | `autocapitalization-text-all`, `text-none`, `text-sentences`, `text-words` |
|
|
947
|
+
| `autocorrect` | 2 | `autocorrect`, `autocorrect-false` |
|
|
948
|
+
| `autofill-*` | 32 | `autofill-*` variants |
|
|
949
|
+
|
|
950
|
+
### Boolean & State Classes
|
|
951
|
+
|
|
952
|
+
| Property | Classes | Pattern |
|
|
953
|
+
| --------------------- | -------------------------------------------------- | ----------------------------------- |
|
|
954
|
+
| `editable` | `editable`, `editable-false` | Boolean |
|
|
955
|
+
| `enabled` | `enabled`, `enabled-false` | Boolean |
|
|
956
|
+
| `visible` | `visible`, `visible-false`, `hidden` | Boolean |
|
|
957
|
+
| `selectable` | `selectable`, `selectable-false` | Boolean |
|
|
958
|
+
| `scrolling` | `scrolling-enabled`, `scrolling-enabled-false` | Boolean |
|
|
959
|
+
| `scrollable` | `scrollable` | Boolean |
|
|
960
|
+
| `zoom` | `zoom-enabled`, `zoom-enabled-false` | Boolean |
|
|
961
|
+
| `touch` | `touch-enabled`, `touch-enabled-false` | Boolean |
|
|
962
|
+
| `clip` | `clip-enabled`, `clip-enabled-false` | Boolean (iOS) |
|
|
963
|
+
| `interactive-dismiss` | `interactive-dismiss-mode-enabled`, `*-false` | Boolean (iOS) |
|
|
964
|
+
| `large-title` | `large-title-enabled`, `large-title-enabled-false` | Boolean (iOS) |
|
|
965
|
+
| `overlay` | `overlay-enabled`, `overlay-enabled-false` | Boolean (iOS) |
|
|
966
|
+
| `toolbar` | `toolbar-enabled`, `toolbar-enabled-false` | Boolean |
|
|
967
|
+
| `submit` | `submit-enabled`, `submit-enabled-false` | Boolean |
|
|
968
|
+
| `active` | `active`, `active-false` | Boolean |
|
|
969
|
+
| `modal` | `modal` | Boolean |
|
|
970
|
+
| `animated` | `animated` | Boolean |
|
|
971
|
+
| `focusable` | `focusable` | Boolean |
|
|
972
|
+
| `checkable` | `checkable` | Boolean |
|
|
973
|
+
| `checked` | `checked` | Boolean |
|
|
974
|
+
| `cancelable` | `cancelable` | Boolean |
|
|
975
|
+
| `canceled` | `canceled` | Boolean |
|
|
976
|
+
| `closed` | `closed` | Boolean |
|
|
977
|
+
| `compact` | `compact` | Boolean |
|
|
978
|
+
| `connected` | `connected` | Boolean |
|
|
979
|
+
| `continuous` | `continuous` | Boolean |
|
|
980
|
+
| `debug` | `debug` | Boolean |
|
|
981
|
+
| `destructive` | `destructive` | Boolean |
|
|
982
|
+
| `editable` | `editable`, `editable-false` | Boolean |
|
|
983
|
+
| `editing` | `editing` | Boolean |
|
|
984
|
+
| `enabled` | `enabled`, `enabled-false` | Boolean |
|
|
985
|
+
| `exact` | `exact` | Boolean |
|
|
986
|
+
| `experimental` | `experimental` | Boolean |
|
|
987
|
+
| `hidden` | `hidden` | Boolean (alias for `visible-false`) |
|
|
988
|
+
| `hires` | `hires` | Boolean |
|
|
989
|
+
| `html` | `html` | Boolean |
|
|
990
|
+
| `httponly` | `httponly` | Boolean |
|
|
991
|
+
| `iconified` | `iconified` | Boolean |
|
|
992
|
+
| `interactive` | `interactive` | Boolean |
|
|
993
|
+
| `loading` | `loading` | Boolean |
|
|
994
|
+
| `looping` | `looping` | Boolean |
|
|
995
|
+
| `modal` | `modal` | Boolean |
|
|
996
|
+
| `moveable` | `moveable` | Boolean |
|
|
997
|
+
| `moving` | `moving` | Boolean |
|
|
998
|
+
| `numeric` | `numeric` | Boolean |
|
|
999
|
+
| `online` | `online` | Boolean |
|
|
1000
|
+
| `opaque` | `opaque` | Boolean |
|
|
1001
|
+
| `opaquebackground` | `opaquebackground` | Boolean |
|
|
1002
|
+
| `persistent` | `persistent` | Boolean |
|
|
1003
|
+
| `portrait` | `portrait` | Boolean |
|
|
1004
|
+
| `recording` | `recording` | Boolean |
|
|
1005
|
+
| `reverse` | `reverse` | Boolean |
|
|
1006
|
+
| `running` | `running` | Boolean |
|
|
1007
|
+
| `scrollable` | `scrollable` | Boolean |
|
|
1008
|
+
| `secure` | `secure` | Boolean |
|
|
1009
|
+
| `selected` | `selected` (also has color variants) | Boolean |
|
|
1010
|
+
| `sorted` | `sorted` | Boolean |
|
|
1011
|
+
| `stopped` | `stopped` | Boolean |
|
|
1012
|
+
| `success` | `success` | Boolean |
|
|
1013
|
+
| `swipeable` | `swipeable` | Boolean |
|
|
1014
|
+
| `translucent` | `translucent` | Boolean |
|
|
1015
|
+
| `transparent` | `transparent` | Boolean |
|
|
1016
|
+
| `unique` | `unique` | Boolean |
|
|
1017
|
+
| `uppercase` | `uppercase` | Boolean (also text transform) |
|
|
1018
|
+
| `visible` | `visible`, `visible-false` | Boolean |
|
|
1019
|
+
| `wraps` | `wraps` | Boolean |
|
|
1020
|
+
| `wobble` | `wobble` | Boolean |
|
|
1021
|
+
|
|
1022
|
+
### Text Transformation
|
|
1023
|
+
|
|
1024
|
+
| Class | Property | Value |
|
|
1025
|
+
| ------------- | ------------------ | --------------------------------- |
|
|
1026
|
+
| `uppercase` | autocapitalization | TEXT_AUTOCAPITALIZATION_ALL |
|
|
1027
|
+
| `capitalize` | autocapitalization | TEXT_AUTOCAPITALIZATION_WORDS |
|
|
1028
|
+
| `sentences` | autocapitalization | TEXT_AUTOCAPITALIZATION_SENTENCES |
|
|
1029
|
+
| `normal-case` | autocapitalization | TEXT_AUTOCAPITALIZATION_NONE |
|
|
1030
|
+
|
|
1031
|
+
**Note:** Use `autocapitalization-*` classes for explicit control, or single-word shortcuts.
|
|
1032
|
+
|
|
1033
|
+
### Opacity
|
|
1034
|
+
|
|
1035
|
+
| Pattern | Examples |
|
|
1036
|
+
| ----------- | --------------------------------------------------------------------- |
|
|
1037
|
+
| `opacity-*` | `opacity-0`, `opacity-5`, `opacity-10` ... `opacity-100` (23 classes) |
|
|
1038
|
+
| | Also: `opacity-to-0`, `opacity-to-100` |
|
|
1039
|
+
|
|
1040
|
+
### Transformation & Animation
|
|
1041
|
+
|
|
1042
|
+
| Prefix | Count | Examples |
|
|
1043
|
+
| ------------ | ----- | ----------------------------------------------------------------- |
|
|
1044
|
+
| `rotate-*` | 14 | `rotate-0`, `rotate-1`, `rotate-2`, `rotate-3`, `rotate-6` |
|
|
1045
|
+
| | | `rotate-12`, `rotate-45`, `rotate-90`, `rotate-135`, `rotate-180` |
|
|
1046
|
+
| | | `rotate-225`, `rotate-270`, `rotate-315`, `rotate-360` |
|
|
1047
|
+
| `scale-*` | 15 | `scale-0`, `scale-5` to `scale-200` |
|
|
1048
|
+
| `scale-x-*` | 15 | `scale-x-0`, `scale-x-5` to `scale-x-200` |
|
|
1049
|
+
| `scale-y-*` | 15 | `scale-y-0`, `scale-y-5` to `scale-y-200` |
|
|
1050
|
+
| `origin-*` | ~9 | `origin-center`, `origin-top-left`, etc. |
|
|
1051
|
+
| `duration-*` | 22 | `duration-0`, `duration-50` to `duration-5000` |
|
|
1052
|
+
| `delay-*` | 22 | `delay-0`, `delay-50` to `delay-5000` |
|
|
1053
|
+
| `repeat-*` | ~31 | `repeat-*` variants |
|
|
1054
|
+
|
|
1055
|
+
### Shadows & Elevation
|
|
1056
|
+
|
|
1057
|
+
| Prefix | Count | Examples |
|
|
1058
|
+
| ------------- | ------- | ------------------------------------------------------------------------ |
|
|
1059
|
+
| `shadow-*` | **285** | `shadow-none`, `shadow-sm`, `shadow-md`, `shadow-lg` |
|
|
1060
|
+
| | | `shadow-xl`, `shadow-2xl`, `shadow-xs`, `shadow-inner`, `shadow-outline` |
|
|
1061
|
+
| | | `shadow-*` (all colors), `shadow-radius-*` |
|
|
1062
|
+
| `elevation-*` | 29 | `elevation-0` to `elevation-96` (Android only) |
|
|
1063
|
+
| | | `elevation-px` |
|
|
1064
|
+
|
|
1065
|
+
### Z-Index & Overflow
|
|
1066
|
+
|
|
1067
|
+
| Prefix | Count | Examples |
|
|
1068
|
+
| ------------ | ----- | ---------------------------------------- |
|
|
1069
|
+
| `z-index-*` | 6 | `z-index-0` to `z-index-50` |
|
|
1070
|
+
| `overflow-*` | 6 | `overflow-hidden`, `overflow-scroll` |
|
|
1071
|
+
| | | `overflow-x-hidden`, `overflow-x-scroll` |
|
|
1072
|
+
| | | `overflow-y-hidden`, `overflow-y-scroll` |
|
|
1073
|
+
|
|
1074
|
+
### Status Bar & Navigation
|
|
1075
|
+
|
|
1076
|
+
| Prefix | Count | Examples |
|
|
1077
|
+
| -------------- | ------- | ---------------------------------------------- |
|
|
1078
|
+
| `status-bar-*` | **563** | `status-bar-*`, `status-bar-bg-*` (all colors) |
|
|
1079
|
+
| | | `status-bar-*-gray-*` (all states + colors) |
|
|
1080
|
+
| `tabs-*` | **492** | `tabs-bg-*`, `tabs-tint-*` |
|
|
1081
|
+
| `nav-*` | **492** | `nav-bg-*`, `nav-tint-*` |
|
|
1082
|
+
|
|
1083
|
+
### UI Component States
|
|
1084
|
+
|
|
1085
|
+
| Prefix | Count | Examples |
|
|
1086
|
+
| --------------- | --------- | -------------------------------------------------------------- |
|
|
1087
|
+
| `selected-*` | **1,471** | `selected-*`, `selected-bg-*`, `selected-color-*` (all colors) |
|
|
1088
|
+
| `badge-*` | **735** | `badge-*`, `badge-bg-*`, `badge-color-*` |
|
|
1089
|
+
| `title-*` | **1,019** | `title-*`, `title-attributes-*`, `title-bg-*` |
|
|
1090
|
+
| `disabled-*` | **245** | `disabled-*`, `disabled-bg-*`, `disabled-color-*` |
|
|
1091
|
+
| `highlighted-*` | **245** | `highlighted-*` colors |
|
|
1092
|
+
| `pull-*` | **245** | `pull-*` (pull-to-refresh colors) |
|
|
1093
|
+
| `results-*` | **492** | `results-*` (search results styling) |
|
|
1094
|
+
| `on-*` | **490** | `on-*` (switch/toggle "on" state) |
|
|
1095
|
+
|
|
1096
|
+
### Display & Sizing
|
|
1097
|
+
|
|
1098
|
+
| Prefix | Count | Examples |
|
|
1099
|
+
| ----------- | ----- | ------------------------------------ |
|
|
1100
|
+
| `display-*` | ~5 | `display-*` variants |
|
|
1101
|
+
| `size-*` | ~60 | `size-*` (component sizing) |
|
|
1102
|
+
| `min-*` | ~73 | `minimum-*`, `min-*` (minimum sizes) |
|
|
1103
|
+
| `max-*` | ~91 | `maximum-*`, `max-*` (maximum sizes) |
|
|
1104
|
+
|
|
1105
|
+
### Media & Video
|
|
1106
|
+
|
|
1107
|
+
| Prefix | Count | Examples |
|
|
1108
|
+
| ----------- | ----- | --------------------------------- |
|
|
1109
|
+
| `media-*` | ~23 | `media-*` (media control styling) |
|
|
1110
|
+
| `video-*` | ~5 | `video-*` properties |
|
|
1111
|
+
| `audio-*` | ~15 | `audio-*` properties |
|
|
1112
|
+
| `picture-*` | ~5 | `picture-*` properties |
|
|
1113
|
+
|
|
1114
|
+
### Other Special Prefixes
|
|
1115
|
+
|
|
1116
|
+
| Prefix | Count | Usage |
|
|
1117
|
+
| -------------- | ----- | -------------------------------------------- |
|
|
1118
|
+
| `allows-*` | ~14 | `allows-*`, `allows-*-*-false` (permissions) |
|
|
1119
|
+
| `can-*` | ~14 | `can-*` (capability queries) |
|
|
1120
|
+
| `has-*` | ~12 | `has-*` (state queries) |
|
|
1121
|
+
| `is-*` | ~26 | `is-*` (state queries) |
|
|
1122
|
+
| `no-*` | ~10 | `no-*` (negations) |
|
|
1123
|
+
| `not-*` | ~5 | `not-*` (negations) |
|
|
1124
|
+
| `show-*` | ~30 | `show-*`, `shows-*` (visibility control) |
|
|
1125
|
+
| `hide-*` | ~10 | `hide-*`, `hides-*` (visibility control) |
|
|
1126
|
+
| `cache-*` | ~15 | `cache-*` (caching behavior) |
|
|
1127
|
+
| `autohide` | 2 | `autohide`, `autohide-false` |
|
|
1128
|
+
| `autoplay` | 2 | `autoplay`, `autoplay-false` |
|
|
1129
|
+
| `autorepeat` | 2 | `autorepeat`, `autorepeat-false` |
|
|
1130
|
+
| `autoreverse` | 2 | `autoreverse`, `autoreverse-false` |
|
|
1131
|
+
| `autorotate` | 2 | `autorotate`, `autorotate-false` |
|
|
1132
|
+
| `timeout-*` | ~22 | `timeout-*` (timeout values) |
|
|
1133
|
+
| `count-*` | ~23 | `count-*` (count limits) |
|
|
1134
|
+
| `frequency-*` | ~5 | `frequency-*` (update frequency) |
|
|
1135
|
+
| `exit-*` | ~5 | `exit-*` (exit animations) |
|
|
1136
|
+
| `ease-*` | ~5 | `ease-*` (easing functions) |
|
|
1137
|
+
| `curve-*` | ~5 | `curve-*` (animation curves) |
|
|
1138
|
+
| `flip-*` | ~5 | `flip-*` (flip animations) |
|
|
1139
|
+
| `from-*` | ~245 | `from-*` (animation from states) |
|
|
1140
|
+
| `to-*` | ~245 | `to-*` (animation to states) |
|
|
1141
|
+
| `dim-*` | ~5 | `dim-*` (dimming) |
|
|
1142
|
+
| `fast-*` | ~5 | `fast-*` (fast scroll/animation) |
|
|
1143
|
+
| `slow-*` | ~5 | `slow-*` (slow scroll/animation) |
|
|
1144
|
+
| `smooth-*` | ~5 | `smooth-*` (smooth scrolling) |
|
|
1145
|
+
| `keep-*` | ~5 | `keep-*` (keep state) |
|
|
1146
|
+
| `ignore-*` | ~5 | `ignore-*` (ignore events) |
|
|
1147
|
+
| `include-*` | ~5 | `include-*` (include in layout) |
|
|
1148
|
+
| `extend-*` | ~10 | `extend-*` (extend regions) |
|
|
1149
|
+
| `fixed-*` | ~5 | `fixed-*` (fixed positioning) |
|
|
1150
|
+
| `native-*` | ~5 | `native-*` (native components) |
|
|
1151
|
+
| `override-*` | ~5 | `override-*` (theme overrides) |
|
|
1152
|
+
| `custom-*` | ~5 | `custom-*` (custom properties) |
|
|
1153
|
+
| `generated-*` | ~5 | `generated-*` (generated content) |
|
|
1154
|
+
| `group-*` | ~5 | `group-*` (grouping) |
|
|
1155
|
+
| `grouping-*` | ~5 | `grouping-*` (grouping behavior) |
|
|
1156
|
+
| `handle-*` | ~5 | `handle-*` (event handlers) |
|
|
1157
|
+
| `header-*` | ~5 | `header-*` (header styling) |
|
|
1158
|
+
| `footer-*` | ~5 | `footer-*` (footer styling) |
|
|
1159
|
+
| `main-*` | ~5 | `main-*` (main content) |
|
|
1160
|
+
| `manual-*` | ~5 | `manual-*` (manual control) |
|
|
1161
|
+
| `master-*` | ~5 | `master-*` (master-detail) |
|
|
1162
|
+
| `method-*` | ~5 | `method-*` (HTTP methods) |
|
|
1163
|
+
| `mode-*` | ~31 | `mode-*` (display/interaction modes) |
|
|
1164
|
+
| `multiple-*` | ~5 | `multiple-*` (multiple selection) |
|
|
1165
|
+
| `layer-*` | ~5 | `layer-*` (layering) |
|
|
1166
|
+
| `lazy-*` | ~5 | `lazy-*` (lazy loading) |
|
|
1167
|
+
| `login-*` | ~26 | `login-*` (login-related) |
|
|
1168
|
+
| `mixed-*` | ~5 | `mixed-*` (mixed content) |
|
|
1169
|
+
| `object-*` | ~5 | `object-*` (object fit/position) |
|
|
1170
|
+
| `in-*` | ~5 | `in-*` (insets) |
|
|
1171
|
+
| `items-*` | ~5 | `items-*` (list items) |
|
|
1172
|
+
| `indention-*` | ~31 | `indention-*` (text indention) |
|
|
1173
|
+
| `outputs-*` | ~14 | `outputs-*` (output devices) |
|
|
1174
|
+
| `inputs-*` | ~14 | `inputs-*` (input devices) |
|
|
1175
|
+
| `override-*` | ~5 | `override-*` (property overrides) |
|
|
1176
|
+
| `path-*` | ~5 | `path-*` (path drawing) |
|
|
1177
|
+
| `pause-*` | ~5 | `pause-*` (pause behavior) |
|
|
1178
|
+
| `playback-*` | ~12 | `playback-*` (media playback) |
|
|
1179
|
+
| `pointer-*` | ~5 | `pointer-*` (pointer events) |
|
|
1180
|
+
| `prevent-*` | ~5 | `prevent-*` (prevent defaults) |
|
|
1181
|
+
| `proximity-*` | ~5 | `proximity-*` (sensor) |
|
|
1182
|
+
| `prune-*` | ~5 | `prune-*` (prune content) |
|
|
1183
|
+
| `ready-*` | ~5 | `ready-*` (ready state) |
|
|
1184
|
+
| `remote-*` | ~5 | `remote-*` (remote images) |
|
|
1185
|
+
| `requires-*` | ~5 | `requires-*` (requirements) |
|
|
1186
|
+
| `role-*` | ~5 | `role-*` (accessibility roles) |
|
|
1187
|
+
| `section-*` | ~31 | `section-*` (list sections) |
|
|
1188
|
+
| `search-*` | ~5 | `search-*` (search UI) |
|
|
1189
|
+
| `selection-*` | ~5 | `selection-*` (text selection) |
|
|
1190
|
+
| `shift-*` | ~5 | `shift-*` (shift modifier) |
|
|
1191
|
+
| `shuffle-*` | ~5 | `shuffle-*` (shuffle order) |
|
|
1192
|
+
| `source-*` | ~5 | `source-*` (image source) |
|
|
1193
|
+
| `split-*` | ~5 | `split-*` (split view) |
|
|
1194
|
+
| `state-*` | ~16 | `state-*` (UI states) |
|
|
1195
|
+
| `style-*` | ~14 | `style-*` (style variants) |
|
|
1196
|
+
| `submit-*` | ~5 | `submit-*` (form submission) |
|
|
1197
|
+
| `suppress-*` | ~5 | `suppress-*` | `suppresses-*` | ~5 | `suppresses-*` |
|
|
1198
|
+
| `sustained-*` | ~5 | `sustained-*` |
|
|
1199
|
+
| `swipe-*` | ~5 | `swipe-*` (swipe gestures) |
|
|
1200
|
+
| `target-*` | ~120 | `target-*` (action targets) |
|
|
1201
|
+
| `throw-*` | ~5 | `throw-*` (throw gestures) |
|
|
1202
|
+
| `tls-*` | ~5 | `tls-*` (TLS settings) |
|
|
1203
|
+
| `toggle-*` | ~5 | `toggle-*` (toggle behavior) |
|
|
1204
|
+
| `toolbar-*` | ~5 | `toolbar-*` (toolbar styling) |
|
|
1205
|
+
| `trace-*` | ~5 | `trace-*` (debug traces) |
|
|
1206
|
+
| `update-*` | ~5 | `update-*` (update behavior) |
|
|
1207
|
+
| `use-*` | ~5 | `use-*` (feature flags) |
|
|
1208
|
+
| `user-*` | ~5 | `user-*` (user preferences) |
|
|
1209
|
+
| `valid-*` | ~5 | `valid-*` (validation) |
|
|
1210
|
+
| `validates-*` | ~5 | `validates-*` |
|
|
1211
|
+
| `value-*` | ~10 | `value-*` (component values) |
|
|
1212
|
+
| `view-*` | ~245 | `view-*` (view properties) |
|
|
1213
|
+
| `visibility-*` | ~5 | `visibility-*` |
|
|
1214
|
+
| `waits-*` | ~5 | `waits-*` (wait states) |
|
|
1215
|
+
| `which-*` | ~5 | `which-*` (conditional) |
|
|
1216
|
+
| `will-*` | ~5 | `will-*` (future state) |
|
|
1217
|
+
| `upside-*` | ~5 | `upside-*` (orientation) |
|
|
1218
|
+
| `upright-*` | ~62 | `upright-*` (orientation) |
|
|
1219
|
+
| `save-*` | ~5 | `save-*` (save behavior) |
|
|
1220
|
+
| `scales-*` | ~5 | `scales-*` |
|
|
1221
|
+
| `scaling-*` | ~5 | `scaling-*` |
|
|
1222
|
+
| `scroll-*` | ~20 | `scroll-*` |
|
|
1223
|
+
| `scrolls-*` | ~5 | `scrolls-*` |
|
|
1224
|
+
|
|
1225
|
+
---
|
|
1226
|
+
|
|
1227
|
+
## PROHIBITED: CSS Classes (DO NOT EXIST)
|
|
1228
|
+
|
|
1229
|
+
| CSS Class | Issue | PurgeTSS Alternative |
|
|
1230
|
+
| ----------------- | --------------------------------- | ------------------------------------------- |
|
|
1231
|
+
| `flex-row` | Flexbox not supported | `horizontal` |
|
|
1232
|
+
| `flex-col` | Flexbox not supported | `vertical` |
|
|
1233
|
+
| `flex` | Flexbox not supported | `horizontal` or `vertical` |
|
|
1234
|
+
| `justify-between` | Flexbox not supported | Use margins/positioning |
|
|
1235
|
+
| `justify-center` | Flexbox not supported | Use margins/positioning |
|
|
1236
|
+
| `items-center` | Different meaning in Titanium | Use layout + sizing |
|
|
1237
|
+
| `w-full` | Different meaning than Tailwind | Use `w-full` for 100%, `w-screen` for FILL |
|
|
1238
|
+
| `flex-wrap` | Flexbox not supported | Not supported |
|
|
1239
|
+
| `flex-grow` | Flexbox not supported | Not supported |
|
|
1240
|
+
| `flex-shrink` | Flexbox not supported | Not supported |
|
|
1241
|
+
| `rounded-full` | Requires size suffix | `rounded-full-12` (size × 4 = diameter) |
|
|
1242
|
+
| `space-x-*` | Space utilities not like Tailwind | Use `gap-*` |
|
|
1243
|
+
| `space-y-*` | Space utilities not like Tailwind | Use `gap-*` |
|
|
1244
|
+
| `leading-*` | Uses different prefix | Use `line-h-multiple-*` or `line-spacing-*` |
|
|
1245
|
+
| `tracking-*` | Uses different prefix | Use `letter-spacing-*` |
|
|
1246
|
+
|
|
1247
|
+
---
|
|
1248
|
+
|
|
1249
|
+
## All 364 Unique Prefixes (Alphabetical)
|
|
1250
|
+
|
|
1251
|
+
```
|
|
1252
|
+
accessibility, accessory, accuracy, action, active, activity, alignment, all, allow, allows,
|
|
1253
|
+
amber, anchor, animated, app, arrow, aspect, audio, authentication, auto, autocapitalization,
|
|
1254
|
+
autocorrect, autofill, autohide, autoplay, autorepeat, autoreverse, autorotate, availability,
|
|
1255
|
+
available, backfill, background, backward, badge, bar, battery, bg, black, block, blue, border,
|
|
1256
|
+
bottom, break, bubble, bubbles, button, bypass, cache, calendar, camera, can, cancel,
|
|
1257
|
+
cancelable, canceled, capitalize, case, charset, checkable, checked, clear, clip, closed,
|
|
1258
|
+
code, col, colors, compact, composite, compression, connected, contacts, content, continuous,
|
|
1259
|
+
count, current, curve, custom, cyan, date, debug, delay, destructive, dim, disable, disabled,
|
|
1260
|
+
display, drag, drawer, drop, duration, ease, editable, editing, elevation, eligible, ellipsize,
|
|
1261
|
+
emerald, enable, enabled, exact, exit, experimental, extend, fast, filter, fixed, flag, flip,
|
|
1262
|
+
focusable, font, footer, force, format, format24, frequency, from, fuchsia, fullscreen, gap,
|
|
1263
|
+
generated, getters, gray, green, grid, group, grouping, h, handle, has, header, hidden, hide,
|
|
1264
|
+
hides, highlighted, hint, hires, home, horizontal, hour12, html, httponly, hyphenation, icon,
|
|
1265
|
+
iconified, idle, ignore, image, in, include, indention, indicator, indigo, input, inputs,
|
|
1266
|
+
inset, interactive, is, italic, items, java, keep, keyboard, kind, landscape, large, launch,
|
|
1267
|
+
layer, lazy, left, letter, light, lime, line, lines, list, loading, location, login, looping,
|
|
1268
|
+
m, main, manual, master, max, maximum, mb, media, method, min, minimum, mixed, ml, modal,
|
|
1269
|
+
mode, move, moveable, movie, moving, mr, mt, multiple, mx, my, native, nav, navigation,
|
|
1270
|
+
needs, network, neutral, no, normal, not, numeric, object, on, online, opacity, opaque,
|
|
1271
|
+
opaquebackground, opaquebg, orange, orientation, origin, outputs, overflow, overlay, override,
|
|
1272
|
+
p, padding, page, paging, paragraph, password, path, pause, pb, persistent, picture, pink,
|
|
1273
|
+
pl, placeholder, platform, playback, pointer, portrait, position, pr, prevent, proximity,
|
|
1274
|
+
prune, pt, pull, purple, px, py, ready, recording, red, remote, repeat, requires, results,
|
|
1275
|
+
return, reverse, right, role, rose, rotate, rounded, row, running, save, scale, scales,
|
|
1276
|
+
scaling, scroll, scrollable, scrolling, scrolls, search, section, secure, selected, selection,
|
|
1277
|
+
sentences, separator, shadow, shift, show, shows, shuffle, size, sky, slate, smooth, sorted,
|
|
1278
|
+
source, split, state, status, stone, stopped, style, submit, subtitle, success, suppress,
|
|
1279
|
+
suppresses, sustained, swipe, swipeable, tab, tabs, target, teal, text, theme, throw, thumb,
|
|
1280
|
+
timeout, tint, title, tls, to, toggle, toolbar, top, torch, touch, trace, track, translucent,
|
|
1281
|
+
transparent, treat, type, unique, update, uppercase, upright, upside, use, user, valid,
|
|
1282
|
+
validates, value, vertical, video, view, violet, visibility, visible, w, waits, wh, which,
|
|
1283
|
+
white, will, wobble, wraps, x, y, yellow, z, zinc, zoom
|
|
1284
|
+
```
|
|
1285
|
+
|
|
1286
|
+
---
|
|
1287
|
+
|
|
1288
|
+
## Quick Verification Commands
|
|
1289
|
+
|
|
1290
|
+
```bash
|
|
1291
|
+
# Search for a specific prefix
|
|
1292
|
+
grep -o "'\.[a-zA-Z0-9_/-]*':" ./purgetss/styles/utilities.tss | sed "s/'\.//;s/':$//" | grep "^bg-" | sort -u
|
|
1293
|
+
|
|
1294
|
+
# Search for keyboard classes
|
|
1295
|
+
grep -o "'\.[a-zA-Z0-9_/-]*':" ./purgetss/styles/utilities.tss | sed "s/'\.//;s/':$//" | grep "^keyboard-type-" | sort -u
|
|
1296
|
+
|
|
1297
|
+
# Search for text classes
|
|
1298
|
+
grep -o "'\.[a-zA-Z0-9_/-]*':" ./purgetss/styles/utilities.tss | sed "s/'\.//;s/':$//" | grep "^text-" | sort -u
|
|
1299
|
+
|
|
1300
|
+
# Search for margin classes
|
|
1301
|
+
grep -o "'\.[a-zA-Z0-9_/-]*':" ./purgetss/styles/utilities.tss | sed "s/'\.//;s/':$//" | grep "^m-" | sort -u
|
|
1302
|
+
|
|
1303
|
+
# Search for boolean/state classes
|
|
1304
|
+
grep -o "'\.[a-zA-Z0-9_/-]*':" ./purgetss/styles/utilities.tss | sed "s/'\.//;s/':$//" | grep -E "^(editable|enabled|visible|hidden)$"
|
|
1305
|
+
|
|
1306
|
+
# Count total classes
|
|
1307
|
+
grep -o "'\.[a-zA-Z0-9_/-']*':" ./purgetss/styles/utilities.tss | wc -l
|
|
1308
|
+
|
|
1309
|
+
# Count unique classes
|
|
1310
|
+
grep -o "'\.[a-zA-Z0-9_/-']*':" ./purgetss/styles/utilities.tss | sort -u | wc -l
|
|
1311
|
+
|
|
1312
|
+
# Get all unique prefixes
|
|
1313
|
+
grep -o "'\.[a-zA-Z0-9_/-']*':" ./purgetss/styles/utilities.tss | sed "s/'\.//;s/':$//" | while read line; do echo "${line%%-*}"; done | sort -u
|
|
1314
|
+
```
|
|
1315
|
+
|
|
1316
|
+
---
|
|
1317
|
+
|
|
1318
|
+
## When to Use Direct Properties (No Classes)
|
|
1319
|
+
|
|
1320
|
+
These properties are NOT styled with classes in PurgeTSS - use as XML attributes:
|
|
1321
|
+
|
|
1322
|
+
| Property | Use As Attribute | Notes |
|
|
1323
|
+
| -------------- | --------------------------------- | ------------------------ |
|
|
1324
|
+
| `id` | `id="myId"` | Component identification |
|
|
1325
|
+
| `onClick` | `onClick="functionName"` | Event handlers |
|
|
1326
|
+
| `onPostlayout` | `onPostlayout="handlePostlayout"` | Event handlers |
|
|
1327
|
+
| `hintText` | `hintText="Email"` | Placeholder text |
|
|
1328
|
+
| `passwordMask` | `passwordMask="true"` | Password masking |
|
|
1329
|
+
| `value` | `value="value"` | Component value |
|
|
1330
|
+
| `text` | `text="Label text"` | Label text |
|
|
1331
|
+
| `title` | `title="Button title"` | Button title |
|
|
1332
|
+
| `imageUrl` | `imageUrl="/path.png"` | Image source |
|
|
1333
|
+
| `bindId` | `bindId="myData"` | ListView data binding |
|
|
1334
|
+
|
|
1335
|
+
**Note:** For `autocapitalization`, `editable`, `enabled`, `visible`, `autocorrect` - PurgeTSS DOES have classes (see above), so you CAN use either the class or the attribute depending on your preference.
|
|
1336
|
+
|
|
1337
|
+
---
|
|
1338
|
+
|
|
1339
|
+
## Key Insights from Real Data
|
|
1340
|
+
|
|
1341
|
+
1. **21,236 unique classes** across **364 unique prefixes** - Far more than initially documented
|
|
1342
|
+
2. **Extensive state management** - Hundreds of `*enabled`, `*-false` classes for UI states
|
|
1343
|
+
3. **Platform-specific classes** - Many iOS/Android specific variants (like `[platform=ios]`)
|
|
1344
|
+
4. **Complete color coverage** - All 22 Tailwind v3 colors with 11 shades each (50-950) = 242 color variants per prefix
|
|
1345
|
+
5. **Boolean class pattern** - For properties like `editable`, `enabled`, `visible` → `class` and `class-false`
|
|
1346
|
+
6. **UI component state variants** - `selected-*`, `badge-*`, `title-*`, `disabled-*` with full color coverage
|
|
1347
|
+
7. **Keyboard toolbar styling** - Extensive `keyboard-toolbar-*` classes for custom keyboard accessories
|
|
1348
|
+
8. **Status bar & navigation** - `status-bar-*`, `tabs-*`, `nav-*` for system UI customization
|
|
1349
|
+
9. **Accessibility support** - `accessibility-*` classes for a11y properties
|
|
1350
|
+
10. **Animation system** - `duration-*`, `delay-*`, `rotate-*`, `scale-*` for PurgeTSS Animation component
|