Skip to content
This repository was archived by the owner on Nov 17, 2022. It is now read-only.

platform specific classes are now available without a plugin #1904

Merged
merged 1 commit into from
Jul 28, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/ui/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ There are 4 primary ways to target styles at iOS or Android:
1. Platform-specific stylesheets {% nativescript %}(`styles.ios.css`, `styles.android.css`){% endnativescript %}{% angular %}(`styles.component.ios.css`, `styles.component.android.css`){% endangular %}
2. Platform-specific markup blocks (`<ios> ... </ios>`, `<android> ... </android>`)
3. Platform-specific attributes (`<Label ios:style="..." android:style="..."`)
4. Platform-specific CSS rules (`.ios .mystyle { ... }`, `.android .mystyle { ... }`) _[*requires plugin](https://market.nativescript.org/plugins/nativescript-platform-css)_
4. Platform-specific CSS rules {% nativescript %}(`.ns-ios .mystyle { ... }`, `.ns-android .mystyle { ... }`){% endnativescript %}{% angular %}(`:host-content(.ns-ios) .mystyle { ... }`, `:host-context(.ns-android) .mystyle { ... }`){% endangular %}

The most common and maintainable pattern for managing platform-agnostic and platform-specific styles in NativeScript is with multiple stylesheets and CSS imports. Use {% nativescript %}[this Playground demo](https://play.nativescript.org/?template=play-tsc&id=JY218G){% endnativescript %}{% angular %}[this Playground demo](https://play.nativescript.org/?template=play-ng&id=Z4d8A6){% endangular %} to see this pattern in action.

Expand Down