NativeScript Pager
Install
tns plugin add nativescript-pager
Usage
IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager
<pager:Pager items="{{items}}" row="2" id="pager" pagesCount="10" showNativePageIndicator="false" backgroundColor="lightsteelblue">
<pager:Pager.itemTemplate>
<GridLayout rows="auto, *" columns="*" backgroundColor="red">
<Label text="{{title}}"/>
<Image row="1" src="{{image}}"/>
</GridLayout>
</pager:Pager.itemTemplate>
</pager:Pager>AngularNative
import { PagerModule } from "nativescript-pager/angular";
@NgModule({
imports: [
PagerModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})Angular v2
<Pager [items]="items" #pager [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="onIndexChanged($event)" class="pager">
<template pagerItemTemplate let-i="index" let-item="item">
<GridLayout class="pager-item" rows="auto, *" columns="*" backgroundColor="red">
<Label [text]="item.title"></Label>
<Image row="1" [src]="item.image"></Image>
</GridLayout>
</template>
</Pager>Angular v4
<Pager [items]="items" #pager [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="onIndexChanged($event)" class="pager">
<ng-template pagerItemTemplate let-i="index" let-item="item">
<GridLayout class="pager-item" rows="auto, *" columns="*" backgroundColor="red">
<Label [text]="item.title"></Label>
<Image row="1" [src]="item.image"></Image>
</GridLayout>
</ng-template>
</Pager>Config
<Pager disableSwipe="true" selectedIndex="5" transformer="FlipHorizontalTransformer">Transformations
- AccordionTransformer
- BackgroundToForegroundTransformer
- CubeInTransformer
- CubeOutTransformer
- DefaultTransformer
- DepthPageTransformer
- DrawFromBackTransformer
- FlipHorizontalTransformer
- FlipVerticalTransformer
- ForegroundToBackgroundTransformer
- ParallaxPageTransformer
- RotateDownTransformer
- RotateUpTransformer
- StackTransformer
- TabletTransformer
- ZoomInTransformer
- ZoomOutSlideTransformer
- ZoomOutTranformer
| Android |
|---|
 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent