NativeScript Pager

Install

#### NativeScript 7x

- tns plugin add @enduco/ui-pager

#### NativeScript 6x

- tns plugin add nativescript-pager

#### NativeScript 5x

- tns plugin add nativescript-pager@9.x

#### NativeScript 4x

- tns plugin add nativescript-pager@8.0.2

#### NativeScript 3x

- tns plugin add nativescript-pager@7.2.3

#### NativeScript 2x

- tns plugin add nativescript-pager@2.3.0

Usage

Note v11+

``
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.
``


IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

`xml








`

$3

`xml







`

$3

`xml
showIndicator="true" backgroundColor="lightsteelblue">














`

$3

`js
import Vue from 'nativescript-vue';
import Pager from 'nativescript-pager/vue';

Vue.use(Pager);
`

`html

`

$3

`html








`

$3

`js
import { PagerModule } from "nativescript-pager/angular";

@NgModule({
imports: [
PagerModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
`

_Angular v2_

`html
[items]="items"
#pager
[selectedIndex]="currentPagerIndex"
(selectedIndexChange)="onIndexChanged($event)"
class="pager"
>


`

_Angular v4+_

`html
[items]="items"
#pager
[selectedIndex]="currentPagerIndex"
(selectedIndexChange)="onIndexChanged($event)"
class="pager"
>

class="pager-item"
rows="auto, *"
columns="*"
backgroundColor="red"
>





`

$3

`ts
public templateSelector = (item: any, index: number, items: any) => {
return index % 2 === 0 ? 'even' : 'odd';
}
`

`html
row="1"
[items]="items | async"
[itemTemplateSelector]="templateSelector"
#pager
[selectedIndex]="currentPagerIndex"
(selectedIndexChange)="onIndexChanged($event)"
class="pager"
backgroundColor="lightsteelblue"
>








class="pager-item"
rows="auto,auto,auto,*"
columns="*"
backgroundColor="white"
>






`

$3

`html
backgroundColor="orange"
row="1"
#pager
[selectedIndex]="1"
height="100%"
>













`


$3

`typescript jsx
import {$Pager} from 'nativescript-pager/react';
return (
<$Pager
height={{ unit: "%", value: 100 }}
selectedIndex={this.selectedIndex}
selectedIndexChange={this.selectedIndexChange.bind(this)}
items={this.items}
cellFactory={
(item, ref) => {
return (
<$StackLayout id={item.title} ref={ref}>
<$Label text={item.title}/>
<$ImageCacheIt stretch={'aspectFill'}
src={item.image}/>

);
}
}/>
)
`

$3

`typescript jsx
return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
<$PagerItem backgroundColor={'red'}>
<$Label text={'First'}/>

<$PagerItem backgroundColor={'white'}>
<$Label text={'Second'}/>

<$PagerItem backgroundColor={'black'}>
<$Label text={'Third'} color={new Color('white')}/>

<$PagerItem backgroundColor={'green'}>
<$Label text={'Fourth'}/>

<$PagerItem backgroundColor={'pink'}>
<$Label text={'Fifth'}/>

)

`

Config

`xml

``

| IOS | Android |
| --------------------------------------- | -------------------------------------------- |
| !ios | !android |