Add class to Page element


#1

Hi,
I’m looking for a way to add class to Page element. I want to target iphone 10 and add custom styles.
This is what i have now:

global.checkDevice = function () {
    var platformModule = require('platform');
    var page = require('ui/page');

    var width = platformModule.screen.mainScreen.widthPixels;
    var height = platformModule.screen.mainScreen.heightPixels;

    if (platformModule.isIOS && ((height == 2436 && width == 1125) || (height == 1125 && width == 2436))) {
        this.page.className = 'iphonex';
        console.dir(this);
        //applicationSettings.setBoolean('iPhoneX', true);
        console.log ('jest');
    } else {
        //applicationSettings.setBoolean('iPhoneX', false);
        console.log ('niema');
    }
};

It’s almost working, but throws an error:

navigation.js:28:18: JS ERROR TypeError: undefined is not an object (evaluating ‘this.page.className = ‘iphonex’’)

How this can be fixed ?
Thanks.


#2

If your aim is to style specifically for iPhone X, basically device specific / platform specific styles use nativescript-platform-css plugin.


#3

Hi , Thanks !!!
Can you provie any example, on how to detect iphone 10 with this ?
Many thanks !


#4

Checkout the plugin’s read me, it’s taken care by plugin.


#5

Thanks.
Can i assume that now i can add this in app.css ?

.iosXXX StackLayout {
background-color: green;
}

If yes, how to change XXX to point iphone 10 ?

Thanks @manojdcoder


#6

I’m sorry, i think i’m too tired…
Didnt read docs with caution.

.iphonex StackLayout {
background-color: red;
}

This plugin IS COOOOOL.
Thanks @NathanaelA !!