Skip to content

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

License

Notifications You must be signed in to change notification settings

mrnkr/nativescript-ngx-iphonex-safe-area

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 unsafe area, all the rest is where your interface should be.

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published