README
@nativescript-community/ui-pager
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
- API
- Usage in Angular
- Usage in React
- Usage in Svelte
- Usage in Vue
- Demos and Development
- Questions
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.