| | | | --- | ----------- | | iOS Demo | Android Demo |

Table of Contents

• Installation
• API
  • Properties
• Usage in Angular
  • Examples
• Usage in Vue
  • Examples

Installation

Run the following command from the root of your project:

ns plugin add @nativescript-community/ui-pager-indicator

API

Properties

| Property | Type | | - | - | | color | Color or string | | selectedColor | Color or string |

PagerIndicator add page control for Pager or other Paging Views.

Usage in Angular

If you are planning to use an indicator, add the following to your module:

import { registerElement } from "@nativescript/angular";
import { PagerIndicator } from "@nativescript-community/ui-pager-indicator";
registerElement("PagerIndicator", () => PagerIndicator)

Then in your template:

<Pager id="pager" [items]="items"
    ...
</Pager>
<PagerIndicator pagerViewId="pager" />

Examples

• Indicator Pager
  • A simple pager example using dynamic content and indicator.

Usage in Vue

Import the module into your project.

import Vue from 'nativescript-vue';
Vue.registerElement('PagerIndicator', () => require('@nativescript-community/ui-pager-indicator').PagerIndicator);

then in your template:

<Pager id="pager" :items="items"
    ...
</Pager>
<PagerIndicator pagerViewId="pager"/>

Examples

• Indicator Pager
  • A simple pager example using dynamic content and indicator.