CSS Class Names

At root level from Nativescript

(we don't add these, {N} does

• .ns-android
• '.ns-ios`
• '.ns-portrait`
• '.ns-landscape`

At Page level

• .macos for Macintosh desktop

• .windows for Windows desktop

• .linux for Linux desktop

• .constrained on Desktop when body width < 500 and on Mobile when screen width <= 320

• .tiny Android only when constrained and scale < 1

• .small Android only when not constrained and scale < 2

Names assigned by components

• .tb-title-bar For the whole of the title bar assembly
• .tool-bar For the toolbar that holds any tool buttons defined
• .tool-bar-container Android-only used to define the width control for the tool-bar flex box
• .tb-toolbutton Defines a tool bar button appearance
• .tbLabel Specfic to the text label of a tool bar button
• .title The title bar title label
• .indicator-bar The flexbox container of the indicators
• .tb-indicator Appearance of an indicator
• .menu-box Appearance of the menu box control with its hamburger icon

Note that tools and indicator states are potential for any declared state

• .tool-state-default Standard default state appearance of a tool button
• .tool-state-on Standard appearance of a tool button in 'on' state
• .tool-state-off Standard appearance of a tool button in 'off' state
• .indicator-state-default Standard default state appearance of an indicator
• .indicator-state-on Standard appearance of an indicator in 'on' state
• .indicator-state-off Standard appearance of an indicator in 'off' state

Note that any Tb:Component has a CSS class name equivalent to its Javascript class name

• .SimpleLabel Defines appearance of SimpleLabel
• .SimpleButton Defines appearance of SimpleButton

Nativescript primitives

Under Nativescript, the primitive component class names will respond to CSS selection. For example, Label, Button, StackLayout, etc... but to use, one must know the structure of the components involved. The theme-nativescript.scss has a few examples of this.