npm

Need private packages and team management tools?Check out npm Orgs. »

nativescript-ngx-iphonex-safe-area

1.0.0 • Public • Published

nativescript-ngx-iphonex-safe-area

NPM version Downloads Twitter Follow

{N} + Angular directive to implement safe area margins or paddings especially on iPhone X.

Installation

tns plugin add nativescript-ngx-iphonex-safe-area

Usage

Import the module in your app module

import { NgiPhoneXSafeAreaModule } from 'nativescript-ngx-iphonex-safe-area';
 
@NgModule({
    imports: [
        NgiPhoneXSafeAreaModule,
        // ...
    ],
    // ...
})
export class MyModule { }

Import the CSS or SCSS file depending on your project

If your project uses good old css import the classes the directive will apply to your views like so...

@import 'nativescript-ngx-iphonex-safe-area/css/iphonex.css';

In case your project uses scss instead, use this syntax to import the classes...

@import '~nativescript-ngx-iphonex-safe-area/scss/iphonex';

Finally use it in your templates like so

 <GridLayout iPhoneX [mind]="['left', 'right', 'bottom']" [padding]="true"></GridLayout>

The result will be something like this...

Screenshot portrait Screenshot landscape

Notice those blueish painted areas? Well, those are the safe area!

If you want a quickstart, check out the demo app.

I promise, this won't break your app in devices other than the iPhone X.

  • Me

API

Property Type Default Description
mind string[] ['left', 'right', 'bottom'] Think of the name as the typical 'Mind the gap' from London Underground. It tells the directive whether it should mind the safe area only at the bottom, only the left or any combination you might need.
padding boolean false You can use this property to tell the directive to apply padding instead of margin to your views.

License

Apache License Version 2.0, January 2004

install

npm i nativescript-ngx-iphonex-safe-area

Downloadsweekly downloads

14

version

1.0.0

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability