CODEWITHSUNDEEP
angular2-nativescript
HeraclesDev
HeraclesDev

Reputation: 11

How to set Screen Size Qualifiers typescript & angluar2 in nativescript

I'm currently developing nativescript app using typescript & angluar2. I'm going to change layout between tablet and phone. But there was not support multiple screensize qualifiers in typescript & angluar2. So I'm try to use nativescript-platfrom-css plugin.

tns plugin add nativescript-platform-css

But it doesn't work with my project. There are some code in my project as follows.

///directory structure///
... ...
pages/login.html/
pages/login.component.ts/
pages/login.common.css/
... ...

////main.ts///
... ...
import nativescriptPlatfromCss = require('nativescript-platform-css');
... ...

//////login.ts////////

@Component({
  selector: "login",
  providers:[UserService],
  templateUrl:"pages/login/login.html"  ,
  styleUrls:["pages/login/login-common.css", "pages/login/login.css"]
})

... ... /////login.html

<StackLayout #container>
    <TextField class="inputEmail" hint="Email Address"></TextField>
... ...
</StackLayout>

////login.common.css

.inputEmail {
   backgournd-color:'white';
}
.android600 .inputEmail{
   background-color:'red';
}
.android720 .inputEmail{
   background-color:'blue';
}

... ...

I've already seen https://www.nativescript.org/blog/supporting-multiple-screen-resolutions-in-your-nativescript-app and https://github.com/nathanaela/nativescript-platform-css.

But I could not get my goal.

If you know the best way that implement multiple screensize in typescript & angluar2 app, please let me know it.

thanks

Upvotes: 0

Views: 1149

Answers (1)

Tiago Mendes
Tiago Mendes

Reputation: 21

const isTablet: boolean = device.deviceType == DeviceType.Tablet;

@Component({
  styleUrls: ['default.css', (isTablet ? 'tablet.css' : 'phone.css')]
})

- https://github.com/NativeScript/nativescript-angular/issues/404 "EddyVerbruggen Comment".

Also can include the platform detection like so it is helpfull for creating css depending on device and width or height.

import platformModule = require("platform");

console.log("Device model: " + platformModule.device.model);
console.log("Device type: " + platformModule.device.deviceType);
console.log("OS: " + platformModule.device.os);
console.log("OS version: " + platformModule.device.osVersion);
console.log("SDK Version: " + platformModule.device.sdkVersion);

console.log("Screen width: " + platformModule.screen.mainScreen.widthPixels);
console.log("Screen height: " + platformModule.screen.mainScreen.heightPixels);
console.log("Screen scale: " + platformModule.screen.mainScreen.scale);

Upvotes: 1

Related Questions