@nativescript-community/ui-pager

A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data.

Usage no npm install needed!

<script type="module">
  import nativescriptCommunityUiPager from 'https://cdn.skypack.dev/@nativescript-community/ui-pager';
</script>

README

@nativescript-community/ui-pager

Downloads per month NPM Version

A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data.


iOS Demo Android Demo

Table of Contents

Installation

Run the following command from the root of your project:

ns plugin add @nativescript-community/ui-pager

API

Properties

| Property | Type | | - | - | | items | array or ItemsSource | selectedIndex | number | | canGoRight | boolean | | canGoLeft | boolean | | spacing | PercentLengthType | | peaking | PercentLengthType | | perPage | number | | indicator | string ('disable', 'none', 'worm', 'fill', 'swap', 'thin_worm', 'flat')| | circularMode | boolean | | autoPlayDelay | number | | autoPlay | boolean | | orientation | string ('horizontal' or 'vertical') | | autoPlay | boolean | | disableSwipe | boolean | | showIndicator | boolean | | indicatorColor | Color or string | | indicatorSelectedColor | Color or string |

Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.

Usage in Angular

Import the module into your project.

import { PagerModule } from "@nativescript-community/ui-pager/angular";

@NgModule({
    imports: [
        PagerModule,
    ],
})

Examples

  • Static Pager
    • A simple pager example using static content.
  • Basic Pager
    • A simple pager example using dynamic content.

Usage in React

Import the module into your project.

import { Pager } from '@nativescript-community/ui-pager/react';

Examples

  • Basic Pager
    • A simple pager example using dynamic content.

Usage in Svelte

Import the module into your project.

import { registerNativeViewElement } from 'svelte-native/dom';

import PagerElement from '@nativescript-community/ui-pager/svelte';
import { PagerItem } from '@nativescript-community/ui-pager';

PagerElement.register();
registerNativeViewElement('pageritem', () => PagerItem);

Examples

  • Static Pager
    • A simple pager example using static content.
  • Basic Pager
    • A simple pager example using dynamic content.

Usage in Vue

Import the module into your project.

import Vue from 'nativescript-vue';
import Pager from '@nativescript-community/ui-pager/vue';

Vue.use(Pager);

Examples

  • Static Pager
    • A simple pager example using static content.
  • Basic Pager
    • A simple pager example using dynamic content.

Demos and Development

Setup

To run the demos, you must clone this repo recursively.

git clone https://github.com/@nativescript-community/ui-pager.git --recursive

Install Dependencies:

npm i # or 'yarn install' or 'pnpm install'

Interactive Menu:

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

Build

npm run build

npm run build.angular # or for Angular

Demos

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.