open-index/open-npm huggingface dataset:
npm package: @nativescript-community/text
Description: Expands the capabilities of NativeScript's text property.
Author: Martin Guillon
Latest version: 1.6.24

[![npm](https://img.shields.io/npm/v/@nativescript-community/text.svg)](https://www.npmjs.com/package/@nativescript-community/text)
[![npm](https://img.shields.io/npm/dt/@nativescript-community/text.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/text)
[![GitHub forks](https://img.shields.io/github/forks/nativescript-community/text.svg)](https://github.com/nativescript-community/text/network)
[![GitHub stars](https://img.shields.io/github/stars/nativescript-community/text.svg)](https://github.com/nativescript-community/text/stargazers)

## Installation

* `tns plugin add @nativescript-community/text`

Be sure to run a new build after adding plugins to avoid any issues.

## Usage

For now this plugin only brings "shared" property for other plugins using verticalTextAlignment
npm package: @nativescript-community/ui-constraintlayout
Description: A NativeScript layout view that allows you to position widgets in a flexible way.
Author: CatchABus
Latest version: 1.1.0

# @nativescript-community/ui-constraintlayout

This plugin brings Android [ConstraintLayout](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout) capabilities to NativeScript, with a compatible iOS implementation.  
It supports the most commonly used constraints for building flexible, responsive UI layouts across platforms — using a unified API.

## Installation

```javascript
npm install @nativescript-community/ui-constraintlayout
```

## Usage
```xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" xmlns:ui="@nativescript-community/ui-constraintlayout">
  <Page.actionBar>
    <ActionBar title="ui-constraintlayout" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>
  <ui:ConstraintLayout>
    <Button id="button1" text="Click me!" leftToLeftOf="parent" topToTopOf="parent" bottomToBottomOf="parent" backgroundColor="red"/>
    <Button id="button1" text="Click me too!" rightToRightOf="parent" topToTopOf="parent" bottomToBottomOf="parent" backgroundColor="yellow"/>
  </ui:ConstraintLayout>
</Page>
```

## License

Apache License Version 2.0
npm package: @nativescript-community/ui-htmlcanvasapi
Description: An HTML Canvas API implementation on top of android and iOS native APIs
Author: CatchABus
Latest version: 2.0.3

# @nativescript-community/ui-htmlcanvasapi

An HTML Canvas implementation on top of [@nativescript-community/ui-canvas](https://github.com/nativescript-community/ui-canvas).
 
Supported classes:
- OffscreenCanvas
- CanvasRenderingContext2D
- HTMLCanvasElement
- ImageBitmapRenderingContext
- OffscreenCanvasRenderingContext2D
- CanvasGradient
- CanvasPattern
- DOMMatrix
- DOMPoint (not used yet)
- Path2D
- TextMetrics

## Installation

```javascript
npm install @nativescript-community/ui-htmlcanvasapi
```

## Usage
Install polyfills (optional)
```ts
import { Application } from '@nativescript/core';
import { installPolyfills } from '@nativescript-community/ui-htmlcanvasapi';

installPolyfills();

Application.run({ moduleName: 'app-root' });
```

Then, set up your view
```xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:canvas="@nativescript-community/ui-htmlcanvasapi">
  <Page.actionBar>
    <ActionBar title="ui-htmlcanvasapi" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>
  <StackLayout class="p-20">
    <canvas:HTMLCanvasView width="400" height="400" hardwareAccelerated="true" draw="onDraw"/>
  </StackLayout>
</Page>
```

```ts
import { Canvas } from '@nativescript-community/ui-canvas';
import { HTMLCanvasView } from '@nativescript-community/ui-htmlcanvasapi';

export function onDraw(args: { object: HTMLCanvasView; canvas: Canvas }) {
	const ctx = args.object.getContext('2d');

	ctx.save();

	ctx.fillStyle = 'yellow';
	ctx.fillRect(10, 10, 200, 100);

	ctx.transform(1, 0.5, -0.5, 1, 30, 10);

	ctx.fillStyle = 'red';
	ctx.fillRect(10, 10, 200, 100);

	ctx.transform(1, 0.5, -0.5, 1, 30, 10);

	ctx.fillStyle = 'blue';
	ctx.fillRect(10, 10, 200, 100);

	ctx.restore();
}
```

Sometimes, there might be the need to draw things offscreen but keep reference to the view and eventually draw everything there.  
An offscreen buffer can be enabled by setting `isOffscreenBufferEnabled` to `true`.   
Note: Everything will be drawn onto view canvas once app calls view `invalidate()` method.   

```xml
<canvas:HTMLCanvasView id="canvasView" width="100%" height="300" hardwareAccelerated="true" isOffscreenBufferEnabled="true"/>
```

```ts
import { HTMLCanvasView } from '@nativescript-community/ui-htmlcanvasapi';
import { EventData, Page } from '@nativescript/core';

function onNavigatedTo(args: EventData): void {
	const page = <Page>args.object;
	const canvasView = page.getViewById<HTMLCanvasView>("canvasView");
	const ctx = canvasView.getContext('2d');

	ctx.save();
	ctx.fillStyle = 'yellow';
	ctx.fillRect(10, 10, 200, 100);
	ctx.transform(1, 0.5, -0.5, 1, 30, 10);
	ctx.fillStyle = 'red';
	ctx.fillRect(10, 10, 200, 100);
	ctx.transform(1, 0.5, -0.5, 1, 30, 10);
	ctx.fillStyle = 'blue';
	ctx.fillRect(10, 10, 200, 100);
	ctx.restore();

	// Draw everything to view
	canvasView.invalidate();
}
```

## License

Apache License Version 2.0
npm package: @nativescript-community/ui-maplibre
Description: A NativeScript plugin for integrating MapLibre native SDKs (iOS & Android).
Author: CatchABus
Latest version: 1.8.0

# @nativescript-community/ui-maplibre

This plugin allows you to integrate [MapLibre native SDKs](https://github.com/maplibre/maplibre-native) into your NativeScript applications on **iOS** and **Android**.  
It provides a foundation for displaying interactive maps, adding markers, and customizing map views directly from your NativeScript code.

> ⚠️ Note: This plugin is in early development. Not all MapLibre features are implemented yet, but it provides a solid starting point for integrating maps into your app.

## Installation

```javascript
npm install @nativescript-community/ui-maplibre
```

## Usage
```xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" xmlns:ui="@nativescript-community/ui-maplibre">
  <Page.actionBar>
    <ActionBar title="ui-maplibre" icon="" class="action-bar">
        </ActionBar>
  </Page.actionBar>
  <StackLayout class="p-20">
    <ScrollView class="h-full">
      <StackLayout>
        <ui:MapLibreView width="100%" height="500" mapReady="onMapReady"/>
      </StackLayout>
    </ScrollView>
  </StackLayout>
</Page>
```
```ts
import { MapEventData } from '@nativescript-community/ui-maplibre';

export function onMapReady(args: MapEventData) {
	const mapView = args.object;
	const map = mapView.getMap();

	map.setStyle(new URL('https://demotiles.maplibre.org/style.json'));
}
```

## License

Apache License Version 2.0
npm package: @nativescript-community/ui-material-activityindicator
Description: Material Design Activity Indicator expresses an unspecified wait time.
Author: Martin Guillon
Latest version: 7.2.79

# NativeScript Material Circular progress indicator

Material Design's [Circular progress indicator](https://material.io/design/components/progress-indicators.html#circular-progress-indicators) component for NativeScript.

[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-activityindicator.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-activityindicator)
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-activityindicator.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-activityindicator)

## Contents

1. [Installation](#installation)
2. [Changelog](#changelog)
3. [FAQ](#faq)
4.  [Usage](#usage)
    - [Plain NativeScript](#plain-nativescript)
    - [Angular](#nativescript--angular)
    - [Vue](#nativescript--vue)
5.  [API](#api)

## Installation

For NativeScript 7.0+
* `tns plugin add @nativescript-community/ui-material-activityindicator`

##

For NativeScript 6.x
* `tns plugin add nativescript-material-activityindicator`

##

If using ```tns-core-modules```
* `tns plugin add nativescript-material-activityindicator@2.5.4`

##

Be sure to run a new build after adding plugins to avoid any issues.

## [Changelog](./CHANGELOG.md)

## [FAQ](../../README.md#faq)

## Usage

### Plain NativeScript

IMPORTANT: _Make sure you include `xmlns:mda="@nativescript-community/ui-material-activityindicator"` on the Page element._

#### XML

```XML
<Page xmlns:mda="@nativescript-community/ui-material-activityindicator">
    <StackLayout horizontalAlignment="center">
        <mda:ActivityIndicator busy="true"/>
    </StackLayout>
</Page>
```

#### CSS

```CSS
mdactivityindicator {
    color: #fff;
}
```

##

### NativeScript + Angular

```typescript
import { NativeScriptMaterialActivityIndicatorModule } from "@nativescript-community/ui-material-activityindicator/angular";

@NgModule({
    imports: [
        NativeScriptMaterialActivityIndicatorModule,
        ...
    ],
    ...
})
```

```html
<MDActivityIndicator busy="true"></MDActivityIndicator>
```

##

### NativeScript + Vue

```javascript
import Vue from 'nativescript-vue';
import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue';

Vue.use(ActivityIndicatorPlugin);
```

```html
<MDActivityIndicator busy="true"/>
```

## API

### Attributes

Inherite from NativeScript [Activity Indicator](https://docs.nativescript.org/ui/ns-ui-widgets/activity-indicator) so it already has all the same attributes
npm package: @nativescript-community/ui-material-cardview
Description: Material Design Cards contain content and actions about a single subject.
Author: Martin Guillon
Latest version: 7.2.79

# NativeScript Material Card

Material Design's [Card](https://material.io/components/cards) component for NativeScript.

[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-cardview.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-cardview)
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-cardview.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-cardview)

## Contents

1. [Installation](#installation)
2. [Changelog](#changelog)
3. [FAQ](#faq)
4.  [Usage](#usage)
    - [Plain NativeScript](#plain-nativescript)
    - [Angular](#nativescript--angular)
    - [Vue](#nativescript--vue)
5.  [API](#api)

## Installation

For N 7.0
* `tns plugin add @nativescript-community/ui-material-cardview`

##

For N 6.x
* `tns plugin add nativescript-material-cardview`

##

If using ```tns-core-modules```
* `tns plugin add nativescript-material-cardview@2.5.4`

##

Be sure to run a new build after adding plugins to avoid any issues.

## [Changelog](./CHANGELOG.md)

## [FAQ](../../README.md#faq)

## Usage

### Plain NativeScript

<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mdc="@nativescript-community/ui-material-cardview"` on the Page element_

#### XML

```XML
<Page xmlns:mdc="@nativescript-community/ui-material-cardview">
    <StackLayout horizontalAlignment="center">
        <mdc:CardView width="100" height="100"/>
        <mdc:CardView elevation="5" rippleColor="red"  width="100" height="100"/>
   </StackLayout>
</Page>
```

#### CSS

```CSS
mdcardview {
    ripple-color: blue;
    elevation: 4;
}
```

##

### NativeScript + Angular

```typescript
import { NativeScriptMaterialCardViewModule } from "@nativescript-community/ui-material-cardview/angular";

@NgModule({
    imports: [
        NativeScriptMaterialCardViewModule,
        ...
    ],
    ...
})
```

```html
<MDCardView rippleColor="blue"  width="100" height="100"></MDCardView>
```

##

### NativeScript + Vue

```javascript
import Vue from 'nativescript-vue';
import CardViewPlugin from '@nativescript-community/ui-material-cardview/vue';

Vue.use(CardViewPlugin);
```

```html
<MDCardView rippleColor="blue"  width="100" height="100"/>
```

## API

### Attributes

Inherite from NativeScript [StackLayout](https://docs.nativescript.org/ui/layouts/layout-containers#stacklayout-properties)

* **elevation** _optional_

An attribute to set the elevation of the cardview. This will increase the 'drop-shadow' of the cardview.

* **rippleColor** _optional_

An attribute to set the ripple color of the cardview.
npm package: @nativescript-community/ui-material-dialogs
Description: Material Design Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
Author: Martin Guillon
Latest version: 7.2.79

# NativeScript Material Dialogs

Material Design's [Dialogs](https://material.io/components/dialogs) component for NativeScript.

[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-dialogs.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-dialogs)
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-dialogs.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-dialogs)

## Contents

1. [Installation](#installation)
2. [Changelog](#changelog)
3. [FAQ](#faq)
4. [Usage](#usage)

## Installation

For NativeScript 7.0+
* `tns plugin add @nativescript-community/ui-material-dialogs`

##

For NativeScript 6.x
* `tns plugin add nativescript-material-dialogs`

##

If using ```tns-core-modules```
* `tns plugin add nativescript-material-dialogs@2.5.4`

##

Be sure to run a new build after adding plugins to avoid any issues.

## [Changelog](./CHANGELOG.md)

## [FAQ](../../README.md#faq)

## Usage

Uses the same API as [NativeScript Dialogs](https://docs.nativescript.org/ui/dialogs).

Adds one option for `alert`:
* `view` : can be a NativeScript View or a path to to XML component. The custom view will be added to the dialog. Possibilities become endless.

##

### TS

```typescript
import { login, alert, prompt } from "@nativescript-community/ui-material-dialogs";

alert("Your message").then(()=> {
    console.log("Dialog closed!");
});

```
npm package: @nativescript-community/ui-material-progress
Description: Progress view is a linear progress indicator that implements Material Design animation and layout.
Author: Martin Guillon
Latest version: 7.2.79

# NativeScript Material Linear progress indicator

Material Design's [Linear progress indicator](https://material.io/components/progress-indicators#linear-progress-indicators) component for NativeScript.

[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-progress.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-progress)
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-progress.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-progress)

## Contents

1. [Installation](#installation)
2. [Changelog](#changelog)
3. [FAQ](#faq)
4.  [Usage](#usage)
    - [Plain NativeScript](#plain-nativescript)
    - [Angular](#nativescript--angular)
    - [Vue](#nativescript--vue)
5.  [API](#api)

## Installation

For NativeScript 7.0+
* `tns plugin add @nativescript-community/ui-material-progress`

##

For NativeScript 6.x
* `tns plugin add nativescript-material-progress`

##

If using ```tns-core-modules```
* `tns plugin add nativescript-material-progress@2.5.4`

##

Be sure to run a new build after adding plugins to avoid any issues.

## [Changelog](./CHANGELOG.md)

## [FAQ](../../README.md#faq)

## Usage

### Plain NativeScript

<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mdp="@nativescript-community/ui-material-progress"` on the Page element_

#### XML

```XML
<Page xmlns:mdp="@nativescript-community/ui-material-progress">
    <StackLayout horizontalAlignment="center">
        <mdp:Progress value="50" maxValue="100"/>
   </StackLayout>
</Page>
```

#### CSS

```CSS
mdprogress {
    ripple-color: blue;
    elevation: 4;
}
```

##

### NativeScript + Angular

```typescript
import { NativeScriptMaterialProgressModule } from "@nativescript-community/ui-material-progress/angular";

@NgModule({
    imports: [
        NativeScriptMaterialProgressModule,
        ...
    ],
    ...
})
```

```html
<MDProgress v-model="value" maxValue="100"></MDProgress>
```

##

### NativeScript + Vue

```typescript
import ProgressPlugin from '@nativescript-community/ui-material-progress/vue';

Vue.use(ProgressPlugin);
```

```html
<MDProgress value="50" maxValue="100"></MDProgress>
```

## API

### Attributes

Inherite from NativeScript [Progress](https://docs.nativescript.org/ui/components/progress) so it already has all the same attributes.

* **elevation** _optional_

An attribute to set the elevation of the progress. This will increase the 'drop-shadow' of the progress.

* **rippleColor** _optional_

An attribute to set the ripple color of the progress.
npm package: @nativescript-community/ui-material-ripple
Description: The Material Design Ripple component provides a radial action in the form of a visual ripple expanding outward from the user's touch. Ripple is a visual form of feedback for touch events providing users a clear signal that an element is being touched.
Author: Martin Guillon
Latest version: 7.2.79

# NativeScript Material Ripple

Material Design's [Ripple](https://material.io/design/interaction/states.html#pressed) component for NativeScript.

[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-ripple.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-ripple)
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-ripple.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-ripple)

## Contents

1. [Installation](#installation)
2. [Changelog](#changelog)
3. [FAQ](#faq)
4.  [Usage](#usage)
    - [Plain NativeScript](#plain-nativescript)
    - [Angular](#nativescript--angular)
    - [Vue](#nativescript--vue)
5.  [API](#api)

## Installation

For NativeScript 7.0+
* `tns plugin add @nativescript-community/ui-material-ripple`

##

For NativeScript 6.x
* `tns plugin add nativescript-material-ripple`

##

If using ```tns-core-modules```
* `tns plugin add nativescript-material-ripple@2.5.4`

##

Be sure to run a new build after adding plugins to avoid any issues.

## [Changelog](./CHANGELOG.md)

## [FAQ](../../README.md#faq)

## Usage

### Plain NativeScript

<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mdr="@nativescript-community/ui-material-ripple"` on the Page element_

#### XML

```XML
<Page xmlns:mdr="@nativescript-community/ui-material-ripple">
    <StackLayout horizontalAlignment="center">
        <mdr:Ripple rippleColor="green" width="100" height="100" />
   </StackLayout>
</Page>
```

#### CSS

```CSS
mdripple {
    ripple-color: blue;
}
```

##

### NativeScript + Angular

```typescript
import { NativeScriptMaterialRippleModule } from "@nativescript-community/ui-material-ripple/angular";

@NgModule({
    imports: [
        NativeScriptMaterialRippleModule,
        ...
    ],
    ...
})
```

```html
<MDRipple rippleColor="green" width="100" height="100"></MDRipple>
```

##

### NativeScript + Vue

```javascript
import Vue from 'nativescript-vue';
import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';

Vue.use(RipplePlugin);
```

```html
<MDRipple rippleColor="green" width="100" height="100"/>
```

## API

### Attributes

Inherite from NativeScript [StackLayout](https://docs.nativescript.org/ui/layouts/layout-containers#stacklayout-properties).

* **rippleColor** _optional_

An attribute to set the ripple color of the ripple.
npm package: @nativescript-community/ui-material-snackbar
Description: Material Design Snackbars provide brief messages about app processes at the bottom of the screen.
Author: Martin Guillon
Latest version: 7.2.79

# NativeScript Material Snackbar

Material Design's [Snackbar](https://material.io/components/snackbars) component for NativeScript.

[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-snackbar.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-snackbar)
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-snackbar.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-snackbar)

## Contents

1. [Installation](#installation)
2. [Changelog](#changelog)
3. [FAQ](#faq)
4. [Usage](#usage)

## Installation

For NativeScript 7.0+
* `tns plugin add @nativescript-community/ui-material-snackbar`

##

For NativeScript 6.x
* `tns plugin add nativescript-material-snackbar`

##

If using ```tns-core-modules```
* `tns plugin add nativescript-material-snackbar@2.5.4`

##

Be sure to run a new build after adding plugins to avoid any issues.

## [Changelog](./CHANGELOG.md)

## [FAQ](../../README.md#faq)

## Usage

### TypeScript

```typescript
import { SnackBar } from '@nativescript-community/ui-material-snackbar';

const snackbar = new SnackBar();

export function showSimpleSnackbar() {
    snackbar.simple(`I'm a simple snackbar`).then(result => console.log('Simple Snackbar:', result));
}

export function showActionSnackbar() {
    snackbar
        .action({
            message: `I'm a snackbar with an action`,
            actionText: 'Dismiss',
            hideDelay: 2000
        })
        .then(result => console.log('Action Snackbar:', result));
}

export function showColorfulSnackbar() {
    snackbar
        .action({
            message: `I'm a colorful snackbar`,
            textColor: 'blue',
            actionTextColor: 'yellow',
            backgroundColor: 'green',
            actionText: 'Dismiss',
            hideDelay: 2000
        })
        .then(result => console.log('Action Snackbar:', result));
}

```
npm package: @nativescript-community/ui-material-speeddial
Description: When pressed, the Material Design component can display three to six related actions in the form of a speed dial.
Author: Martin Guillon
Latest version: 7.2.79

# NativeScript Material Speed dial

Material Design's [Speed dial](https://material.io/components/buttons-floating-action-button#types-of-transitions) component for NativeScript.

[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-speeddial.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-speeddial)
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-speeddial.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-speeddial)

## Contents

1. [Installation](#installation)
2. [Changelog](#changelog)
3. [FAQ](#faq)
4. [Usage](#usage)

## Installation

```bash
ns plugin add @nativescript-community/ui-material-speeddial
```

Be sure to run a new build after adding plugins to avoid any issues.

## [Changelog](./CHANGELOG.md)

## [FAQ](../../README.md#faq)

## Usage

### NativeScript + Vue

```javascript
import Vue from 'nativescript-vue';
import speeddialPlugin from '@nativescript-community/ui-material-speeddial/vue';

Vue.use(speeddialPlugin);
```

```html
<MDSpeedDial buttonFontSize="26" text="mdi-one-up"  buttonClass="mdi" buttonBackgroundColor="yellow" @tap="onTap">
    <MDSpeedDialItem icon="res://ic_action_add" title="test1" backgroundColor="red"  @tap="onTap"/>
    <MDSpeedDialItem text="mdi-card-account-mail" title="test2" buttonClass="mdi" backgroundColor="green"  @tap="onTap"/>
    <MDSpeedDialItem backgroundImage="~/images/iu.jpg"  backgroundColor="blue"  @tap="onTap"/>
    <MDSpeedDialItem icon="res://ic_action_add" title="test4" backgroundColor="orange" @tap="onTap"/>
</MDSpeedDial>
```
npm package: @nativescript-community/ui-material-switch
Description: Material Switch
Author: Martin Guillon
Latest version: 7.2.79

# NativeScript Material Switch

Material Design's [Switch](https://m3.material.io/components/switch/overview) component for NativeScript.

[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-switch.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-prswitchogress)
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-switch.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-switch)

## Contents

1. [Installation](#installation)
2. [Changelog](#changelog)
3. [FAQ](#faq)
4.  [Usage](#usage)
    - [Plain NativeScript](#plain-nativescript)
    - [Angular](#nativescript--angular)
    - [Vue](#nativescript--vue)
5.  [API](#api)

## Installation

For NativeScript 7.0+
* `tns plugin add @nativescript-community/ui-material-switch`

##

For NativeScript 6.x
* `tns plugin add nativescript-material-switch`

##

Be sure to run a new build after adding plugins to avoid any issues.

## [Changelog](./CHANGELOG.md)

## [FAQ](../../README.md#faq)

## Usage

### Plain NativeScript

<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mdp="@nativescript-community/ui-material-progress"` on the Page element_

#### XML

```XML
<Page xmlns:mdp="@nativescript-community/ui-material-switch">
    <StackLayout horizontalAlignment="center">
        <mdp:Switch />
   </StackLayout>
</Page>
```

#### CSS

```CSS
mdswitch{
    ripple-color: blue;
    elevation: 4;
}
```

##

### NativeScript + Angular

```typescript
import { NativeScriptMaterialSwitchModule } from "@nativescript-community/ui-material-switch/angular";

@NgModule({
    imports: [
        NativeScriptMaterialSwitchModule,
        ...
    ],
    ...
})
```

```html
<MDSwitch v-model="value"></MDSwitch>
```

##

### NativeScript + Vue

```typescript
import SwitchPlugin from '@nativescript-community/ui-material-switch/vue';

Vue.use(SwitchPlugin);
```

```html
<MDSwitch></MDSwitch>
```

## API

### Attributes

Inherits from NativeScript [Switch](https://docs.nativescript.org/ui/components/switch) so it already has all the same attributes.
npm package: @nativescript-community/ui-share-file
Description: Send/share file to other apps.
Author: Leon Borlinghaus
Latest version: 1.3.3

# Nativescript Share File

Send/Share files to other apps.

Android Intent, IOS InteractionController:

<img src="https://github.com/nativescript-community/ui-share-file/blob/master/preview/preview-android.png?raw=true" width="250"> .   <img src="https://github.com/nativescript-community/ui-share-file/blob/master/preview/preview-ios.png?raw=true" width="250">



## Installation

Install the plugin in your app.

~~~
npm install @nativescript-community/ui-share-file
~~~

## Usage 

Info: Shared files should be in the `documents` path.
	
```TypeScript
    import { ShareFile } from '@nativescript-community/ui-share-file';
    import * as fs from '@nativescript/core/file-system';

    export class TestClass{

        shareFile;
        fileName;
        documents;
        path;
        file;

        constructor() {

            this.fileName = 'text.txt';
            this.documents = fs.knownFolders.documents();
            this.path = fs.path.join(this.documents.path, this.fileName);
            this.file = fs.File.fromPath(this.path);
            this.shareFile = new ShareFile();

            this.shareFile.open( { 
                path: this.path, 
                title: 'Open text file with:', // optional Android
                rect: { // optional iPad
                    x: 110,
                    y: 110,
                    width: 0,
                    height: 0
                },
                options: true, // optional iOS
                animated: true // optional iOS
            });
        }
    }

```

### Arguments

#### path
Path to the file which will be shared.


`String`: Required


#### title
Title for the intent on Android. 

`String`: (Optional) 
Default: `Open file:`.


#### rect
Positioning the view for iPads. On iPhones it's always shown on the bottom. 

`Object`: (Optional) 
Default: `{x: 0, y: 0, width: 0, height: 0 }`.

#### options
Show additional opening options for iOS devices. 

`Boolean`: (Optional)
Default: `false`.

#### animated
Opening animation for iOS devices. 

`Boolean`: (Optional) 
Default: `false`.