nativescript-ngx-iphonex-safe-area
TypeScript icon, indicating that this package has built-in type declarations

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

Package Sidebar

Install

npm i nativescript-ngx-iphonex-safe-area

Weekly Downloads

0

Version

1.0.0

License

Apache-2.0

Last publish

Collaborators

  • mrnkr