See: https://fluentreports.com/blog/?p=1434
This version is completely unsupported and untested on NativeScript 6. Please upgrade your plugin to the tested, supported and maintained version.
Documentation for this plugin is located at here
A NativeScript plugin to deal with Declarative UI and Platform specific CSS
See: https://fluentreports.com/blog/?p=1434
This version is completely unsupported and untested on NativeScript 6. Please upgrade your plugin to the tested, supported and maintained version.
Documentation for this plugin is located at here
Plugin should be in es5 mode. it is not working with webpack bundle.
I need to have one extra plugin for this (uglifyJS), while it is already comes with nativescript-dev-webpack.
If possible please compile it and release it in es5 format.
ERROR in bundle.js from UglifyJs
Unexpected token: name (deviceInfo) [bundle.js:10558,4]
Hi,
so I have 2 pages and for both of them, I'm using the tools.
I have welcome page and login page
in welcome, I have a button that goes to login page
I use the following code to go back from login to welcome in login.ts
goBackToMain(){ this.routerExtensions.back(); }
in login HTML page I use a button that on tab call the method
<Button text="Register" class="secondaryBtn" (tap)="goBackToMain()"></Button>
so when I click that button "Regester" and click login button in the welcome page the .iosXXX classes doesn't work
Great work as always Nathan!
I gave this plugin a shot and after adding this css
Button {
background-color: red;
}
.android Button {
background-color: purple;
}
The majority of the buttons show up as purple on my android device as expected. However when calling alert("welcome");
the alert button shows up as red. Additionally all buttons nested in any modal pages show up as red on android.
None of the CSS is being constant in the entire application.
It is going to default after a while or user click.
Hi there, I am creating Labels on the fly and I need to set a style to the Label, in my component, I import the css file but its not picking up the correct style, this is my code:
let title = new Label();
title.text = "My Title";
title.className = "font-16 my-title";
title.color = new Color("black");
container.addChild(title);
This is my css:
.phone :host .my-title {
...
}
Any idea? Thanks!
When using /deep/ .ios Button
, I noticed the css only being applied to all page elements except the ones inside the <router-outlet>
in that same page.
Well, I am not entirely sure that is the issue here, but for some reason I am not able to apply the css to the certain elements I need to apply it to. /deep/ .ios .option-button
is not working in my case.
Running tns plugin add @proplugins/nativescript-platform results in
Not Found - GET https://registry.npmjs.org/@proplugins%2fnativescript-platform - Not found
Hi Nathan!
I am enjoying this plugin very much for defining responsive like pages. However, now I've run into an issue whilst using the OpenSans true-type font, where it seems that the space calculation does not work properly and sentences are "cut off" on iOS (haven't tried Android yet)
I've created an example project which should demonstrate the issue.
The idea of test-css.ts
is to show the text stacked on a cell phone, and on a tablet show them in two columns. I've added the same texts twice (each in a WrapLayout), once with the default font and once with OpenSans.
On the iOS simulator's iPhone 7 (using regular css) all texts display correctly. However, on the iOS simulator's iPad Pro, which is where the CSS rules that use your plugin kick in, both OpenSans paragraphs have the last line cut off.
Any idea what might be wrong here?
Hi!
Not sure if the creator of #22 is experiencing the same thing (there are too little details), but I am having some issues with applying the styles in Angular as well.
For example, in such a scenario (regular non-modal component) as below, the styles are applied only when using /deep/
, whereas when using :host
the styles get applied only to the first element of the ListView
whereas the other items don't get the styles defined with the phone
or tablet
class. Since the Angular docs say that using /deep/
has been depreciated, I would prefer to avoid that use.
<ListView [items]="people$ | async" (itemTap)="onItemTap($event)">
<ng-template let-item="item">
<StackLayout class="card">
<PeopleCard [profile]="item.profile"></PeopleCard>
</StackLayout>
</ng-template>
</ListView>
This works:
/deep/ .phone .card { width:300; height:300; }
/deep/ .tablet .card { width:600; height:600; }
This does not work:
.phone :host .card { width:300; height:300; }
.tablet :host .card { width:600; height:600; }
What am I missing?
Thanks!
How can I use the plugin without the need of requiring it in every page that uses .android
and .ios
?
I have included the require("nativescript-platform-css")
within the main.ts
file. When I try to run the application an exception is thrown in the plugin (line 94).
// Setup Events
Page.on(Page.navigatingToFirst, setDevice); // Exception is thrown here (line 94).
Page.on(Page.showingModallyFirst, setDevice);
Exception:
JS ERROR TypeError: Events name(s) must be string.
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: Events name(s) must be string.
When I debug, the value of Page.navigatingToFirst
is undefined. I'm not quite sure what the root of this issue is.
I am able to get the plugin to work by manually updating the event setup code in platformcss.js
from this:
// Setup Events
Page.on(Page.navigatingToFirst, setDevice);
Page.on(Page.showingModallyFirst, setDevice);
To this:
// Setup Events
Page.on(Page.navigatingToEvent, setDevice);
Is that other event no longer available in the latest NS?
Hi Nathanael,
do you have any plan to release a new version that includes all the new iPhone names like the max or xr?
Thanks
The platform-css plugin does not work anymore. The app crashes on start time and shows the error message nsPlatform.screen is not a function on both Android and iOS. We are still using the same version of the plugin (1.5.0) in our NS 2.5 branch and our NS 3 branch as we did the weeks before and suddenly this error occurs.
Please tell me if you need more detailed information to find the cause of this issue.
Thanks in advance.
Angular isolates component styles from other parts of application. It seems that /deep/ .ios .class-name
breaks this isolation and styles are applied to other parts of the application as well. I tried .ios :host .class-name
approach and it seems that this one doesn't break isolation.
It would be better for other users if you change /deep/ example on the read me file to the one with :host.
What's the proper usecase to get this to work in Ng2?
app.module.ts
require( "nativescript-platform-css" );
login.ios.css
.ios320 .someClass{
color:red;
}
Component │ Current version │ Latest version │ Information │
│ nativescript │ 2.5.4 │ 2.5.4 │ Up to date │
│ tns-core-modules │ 2.5.2 │ 2.5.2 │ Up to date │
│ tns-android │ 2.5.0 │ 2.5.0 │ Up to date │
│ tns-ios │ 2.5.0 │ 2.5.0 │ Up to date
Doesn't seem to work.
I followed the instructions but the settings/colors are not changing in the OSs. Is this related to NS 3.0?
thanks!
Alex
Thank you for this awesome plugin.
There is a problem if you code in NativeScript-Vue. While .android / .ios class are added to <Page>
element, when you create component, you can use StackLayout or every other parent element for it. That, of course, won't receive platform class.
Is there a way around it?
As an example this component in Vue:
<template>
<FlexboxLayout orientation="horizontal"
class="navigation"
>
<StackLayout v-for="item in navigation"
:key="item.name"
>
<Label :text="item.name" />
</template>
</FlexboxLayout>
</template>
<style lang="scss" scoped>
.navigation {
align-items: center;
text-align: center;
border-top-width: 1;
background-color: $white-color;
height: 50;
.android & {
height: 70;
}
}
</style>
<script>
export default {
name: 'navigation',
data() {
return {
navigation: [
{
name: 'Home page'
},
{
name: 'Test page'
},
]
}
}
};
</script>
The plugin works just fine in regular components in NativeScript with Angular, but not in app.component
.
require( "nativescript-platform-css" );
is set in main.ts
file, however styles in app.component.css
are not applied to app.component.html
layout. Same if required in app.module.ts
. When using the same code in a placeholder component it works like a charm.
I'm using TabView
as root navigation, therefore it would be nice if it was possible to set platform specific syles here as well.
Hi. I have added the require ("nativescript-platform-css");
in the page I need to change the css and in my css I put
.ios1024 :host .grade {
padding-top: 55%;
padding-bottom: 55%;
}
and is not working. I also tried using /deep/ but no success.
If I removed the 1024 and only leave .ios :host .grade, it will work but I need the specific config for a 1024 screen.
Is there anything else I should have done?
The sentence in the description of Enhanced Modes is not finished. Information about size groupings is missing from the README file.
https://github.com/nathanaela/nativescript-platform-css#enhanced-modes
https://github.com/NathanaelA/nativescript-platform-css/blame/master/README.md#L70
Any ideas? Here is the command and output:
$ tns plugin add @proplugins/nativescript-platform-css
npm ERR! code E404
npm ERR! 404 Not Found: @proplugins/nativescript-platform-css@latest
Hi,
When I place the .androidXXX or .iosXXX classes on platform.android.css or platform.ios.css it doesn't work
app.modules.js
var nsPlatformCss = require('nativescript-platform-css');
if(isAndroid){
nsPlatformCss.sizeGroupings(true);
}
platform.android.css
.android400 :host #welcomeBtnGrid .primaryBtn {
font-family: "SF-Pro-Display-Medium";
font-size: 30;
width: 315;
height: 52.42;
}
however, if I place the same code on component css class like welcome.android.css it works
Any guess?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.