Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mukaschultze/nativescript-windowed-modal

Consistent modals for Android and iOS
https://github.com/mukaschultze/nativescript-windowed-modal

android ios javascript nativescript typescript

Last synced: about 1 month ago
JSON representation

Consistent modals for Android and iOS

Host: GitHub
URL: https://github.com/mukaschultze/nativescript-windowed-modal
Owner: mukaschultze
License: apache-2.0
Created: 2018-10-09T14:13:31.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2021-06-25T15:13:48.000Z (over 3 years ago)
Last Synced: 2024-10-02T06:02:46.184Z (about 1 month ago)
Topics: android, ios, javascript, nativescript, typescript
Language: TypeScript
Homepage: https://www.npmjs.com/package/nativescript-windowed-modal
Size: 4.32 MB
Stars: 47
Watchers: 4
Forks: 18
Open Issues: 12
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Nativescript Windowed Modal ![apple](https://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-32.png) ![android](https://cdn4.iconfinder.com/data/icons/logos-3/228/android-32.png)

[![npm version](https://badge.fury.io/js/nativescript-windowed-modal.svg)](http://badge.fury.io/js/nativescript-windowed-modal)

[![npm downloads](https://img.shields.io/npm/dm/nativescript-windowed-modal.svg)](http://badge.fury.io/js/nativescript-windowed-modal)

[![Build Status](https://travis-ci.com/mukaschultze/nativescript-windowed-modal.svg?branch=master)](https://travis-ci.com/mukaschultze/nativescript-windowed-modal)

[![Nativescript Dependency](https://img.shields.io/npm/dependency-version/nativescript-windowed-modal/dev/@nativescript/core)](https://www.npmjs.com/package/@nativescript/core)

[![Visitors](https://visitor-badge.glitch.me/badge?page_id=mukaschultze/nativescript-windowed-modal)](https://github.com/mukaschultze/nativescript-windowed-modal)

This plugin overrides the `showModal()` from nativescript, making modals look and behave the same on Android and iOS.

## Installation

```cmd

tns plugin add nativescript-windowed-modal

```

## Usage

### Code

Call the `overrideModalViewMethod()` once before starting the app and register the layout element:

#### Javascript

```js

var windowedModal = require("nativescript-windowed-modal")

windowedModal.overrideModalViewMethod()

```

#### Typescript+Angular

```ts

import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from "nativescript-windowed-modal"

overrideModalViewMethod()

registerElement("ModalStack", () => ModalStack)

```

You can pass extended options like this:

```ts

mainPage.showModal("./modal", {

  context: "I'm the context",

  closeCallback: (response: string) => console.log("Modal response: " + response),

  dimAmount: 0.5 // Sets the alpha of the background dim

} as ExtendedShowModalOptions)

```

#### NativeScript-Vue

```js

// main.js

import { ModalStack, overrideModalViewMethod, VueWindowedModal } from "nativescript-windowed-modal"

overrideModalViewMethod()

Vue.registerElement("ModalStack", () => ModalStack)

Vue.use(VueWindowedModal)

```

You can pass extended options like this:

```html

  export default {

    methods: {

      openModalTap() {

        this.$showModal("./modal", {

          props: {},

          fullscreen: false,

          animated: true,

          stretched: false,

          dimAmount: 0.5 // Sets the alpha of the background dim,

        })

      }

    }

  }

```

### Properties

#### [ExtendedShowModalOptions](../master/src/windowed-modal.common.ts#L13)

| Property   | Type   | Platform | Default | Description                                                                                                                                                                                          |

| ---------- | ------ | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| dimAmount? | number | both     | 0.5     | Controls the alpha value of the dimming color. On Android, setting this to 0 disables the fade in animation. On iOS this value will be replaced with the alpha of the background color if it is set. |

#### [ModalStack](../master/src/modal-stack.ts#L8)

| Property           | Type    | Platform | Default | Description                                                                              |

| ------------------ | ------- | -------- | ------- | ---------------------------------------------------------------------------------------- |

| dismissEnabled     | boolean | both     | true    | If set to true, the modal is allowed to close when touching outside of the content frame |

| verticalPosition   | string  | both     | middle  | Uses the same options as VerticalAlignment ("top" - "middle" - "bottom" - "stretch")     |

| horizontalPosition | string  | both     | center  | Uses the same options as HorizontalAlignment ("left" - "center" - "right" - "stretch")   |

### Layout

Wrap your modal component with a `ModalStack` tag to layout the elements in a consistent way across platforms, it will also allows you to dismiss the modal when touching outsite of the frame:

#### XML

```xml

    

        

            

        

    

```

#### HTML (Angular)

```html

  

    

  

```

### Style

You may want to create the `.modal` and `.modal-container` classes in your .css to set margins, aligment and background color:

```css

.modal {

  margin: 20;

  margin-top: 35;

  border-radius: 8;

  horizontal-align: center;

  vertical-align: middle;

  background-color: white;

}

.modal-container {

  padding: 25;

  padding-bottom: 10;

}

```

## Running the demo app

1. Clone this repo

2. `cd src`

3. `npm run demo.android`, `npm run demo.ios`, `npm run demo.ng.android`, or `npm run demo.ng.ios`

## Known Issues

- Padding won't apply on children of the `ModalStack`, wrapping them with a `StackLayout` fixes the problem;

- Auto width is kinda buggy on some situations, set a fixed width for children of `ModalStack` when possible;

## License

Apache License Version 2.0, January 2004