https://github.com/mrnkr/nativescript-ngx-iphonex-safe-area

{N} + Angular directive to implement safe area margins or paddings especially on iPhone X
https://github.com/mrnkr/nativescript-ngx-iphonex-safe-area

angular angular-plugin iphone-x nativescript nativescript-angular nativescript-plugin safe-area

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mrnkr/nativescript-ngx-iphonex-safe-area
• Owner: mrnkr
• License: apache-2.0
• Created: 2018-01-09T07:35:28.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-01T16:08:51.000Z (almost 6 years ago)
• Last Synced: 2024-11-13T12:09:41.646Z (3 months ago)
• Topics: angular, angular-plugin, iphone-x, nativescript, nativescript-angular, nativescript-plugin, safe-area
• Language: TypeScript
• Size: 2.4 MB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# nativescript-ngx-iphonex-safe-area

[![NPM version][npm-image]][npm-url]

[![Downloads][downloads-image]][npm-url]

[![Twitter Follow][twitter-image]][twitter-url]

[npm-image]:http://img.shields.io/npm/v/nativescript-ngx-iphonex-safe-area.svg

[npm-url]:https://npmjs.org/package/nativescript-ngx-iphonex-safe-area

[downloads-image]:http://img.shields.io/npm/dm/nativescript-ngx-iphonex-safe-area.svg

[twitter-image]:https://img.shields.io/twitter/follow/xmr_nkr.svg?style=social&label=Follow%20me

[twitter-url]:https://twitter.com/xmr_nkr

{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

```typescript

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...

```css

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

```

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

```scss

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

```

### Finally use it in your templates like so

```xml

 

```

### The result will be something like this...

| ![Screenshot portrait](demo/app/assets/screenshot-portrait.png) | ![Screenshot landscape](demo/app/assets/screenshot-landscape.png) |

| --- | --- |

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](https://github.com/mrnkr/nativescript-ngx-iphonex-safe-area/tree/master/demo).

> 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