@nativescript-community/ui-pager 13.0.28 → 13.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.pnpm-debug.log +1 -0
- package/CHANGELOG.md +11 -0
- package/README.md +310 -0
- package/package.json +2 -2
- package/platforms/android/include.gradle +2 -2
package/.pnpm-debug.log
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [13.0.29](https://github.com/nativescript-community/ui-pager/compare/v13.0.28...v13.0.29) (2021-09-17)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **android:** allow to change appcompat version ([8925202](https://github.com/nativescript-community/ui-pager/commit/8925202f1787054e1791f7ebfdf82b6f8d078746))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [13.0.28](https://github.com/nativescript-community/ui-pager/compare/v13.0.27...v13.0.28) (2021-09-17)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @nativescript-community/ui-pager
|
package/README.md
ADDED
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
[](https://www.npmjs.com/package/@nativescript-community/ui-pager)
|
|
2
|
+
[](https://www.npmjs.com/package/@nativescript-community/ui-pager)
|
|
3
|
+
|
|
4
|
+
# NativeScript Pager
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
- `tns plugin add @nativescript-community/ui-pager`
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
**Note** v11+
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
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.
|
|
16
|
+
````
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
IMPORTANT: Make sure you include `xmlns:pager="@nativescript-community/ui-pager"` on the Page element any element can be used in the pager
|
|
20
|
+
|
|
21
|
+
```xml
|
|
22
|
+
<pager:Pager items="{{items}}" row="2" id="pager" spacing="2%" peaking="10%" transformers="scale" pagesCount="10" showIndicator="true" backgroundColor="lightsteelblue">
|
|
23
|
+
<pager:Pager.itemTemplate>
|
|
24
|
+
<GridLayout rows="auto, *" columns="*" backgroundColor="red">
|
|
25
|
+
<Label text="{{title}}"/>
|
|
26
|
+
<Image row="1" src="{{image}}"/>
|
|
27
|
+
</GridLayout>
|
|
28
|
+
</pager:Pager.itemTemplate>
|
|
29
|
+
</pager:Pager>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Multi Template
|
|
33
|
+
|
|
34
|
+
```xml
|
|
35
|
+
<c:Pager selectedIndexChange="selectedIndexChange" itemTemplateSelector="$index % 2 === 0 ? 'even' : 'odd'" selectedIndex="5" items="{{items}}" row="4" id="pager" pagesCount="10" showIndicator="true" backgroundColor="lightsteelblue">
|
|
36
|
+
<Pager.itemTemplates>
|
|
37
|
+
<template key="even">
|
|
38
|
+
<GridLayout rows="auto,auto,*" columns="*">
|
|
39
|
+
<Label text="Even"/>
|
|
40
|
+
<Label row="1" text="{{title}}"/>
|
|
41
|
+
<Image loaded="loadedImage" row="2" src="{{image}}"/>
|
|
42
|
+
</GridLayout>
|
|
43
|
+
</template>
|
|
44
|
+
<template key="odd">
|
|
45
|
+
<GridLayout rows="auto,auto ,auto,*" columns="*" backgroundColor="white">
|
|
46
|
+
<Label text="Odd"/>
|
|
47
|
+
<Label row="1" text="{{title}}"/>
|
|
48
|
+
<StackLayout row="2">
|
|
49
|
+
<Label text="{{image}}"/>
|
|
50
|
+
</StackLayout>
|
|
51
|
+
<Image loaded="loadedImage" row="3" src="{{image}}"/>
|
|
52
|
+
</GridLayout>
|
|
53
|
+
</template>
|
|
54
|
+
</Pager.itemTemplates>
|
|
55
|
+
<!-- <Pager.itemTemplate><GridLayout rows="auto,*" columns="*"><Label row="1" text="{{title}}"/><Image loaded="loadedImage" row="2" src="{{image}}"/></GridLayout></Pager.itemTemplate> -->
|
|
56
|
+
</c:Pager>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Static Views
|
|
60
|
+
|
|
61
|
+
```xml
|
|
62
|
+
<c:Pager selectedIndexChange="selectedIndexChange" row="4" id="pager"
|
|
63
|
+
showIndicator="true" backgroundColor="lightsteelblue">
|
|
64
|
+
<c:PagerItem backgroundColor="red">
|
|
65
|
+
<Label text="First"></Label>
|
|
66
|
+
</c:PagerItem>
|
|
67
|
+
<c:PagerItem backgroundColor="white">
|
|
68
|
+
<Label text="Second" ></Label>
|
|
69
|
+
</c:PagerItem>
|
|
70
|
+
<c:PagerItem backgroundColor="black">
|
|
71
|
+
<Label text="Third" color="white"></Label>
|
|
72
|
+
</c:PagerItem>
|
|
73
|
+
<c:PagerItem backgroundColor="green">
|
|
74
|
+
<Label text="Fourth"></Label>
|
|
75
|
+
</c:PagerItem>
|
|
76
|
+
</c:Pager>
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Vue
|
|
81
|
+
|
|
82
|
+
```js
|
|
83
|
+
import Vue from 'nativescript-vue';
|
|
84
|
+
import Pager from '@nativescript-community/ui-pager/vue';
|
|
85
|
+
|
|
86
|
+
Vue.use(Pager);
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<template>
|
|
91
|
+
<Pager for="item in items">
|
|
92
|
+
<v-template>
|
|
93
|
+
<GridLayout class="pager-item" rows="auto, *" columns="*">
|
|
94
|
+
<Label :text="item.title" />
|
|
95
|
+
<Image stretch="fill" row="1" :src="item.image" />
|
|
96
|
+
</GridLayout>
|
|
97
|
+
</v-template>
|
|
98
|
+
<v-template if="$odd">
|
|
99
|
+
<GridLayout class="pager-item" rows="auto, *" columns="*">
|
|
100
|
+
<Image stretch="fill" :src="item.image" />
|
|
101
|
+
<Label :text="item.title" row="1"/>
|
|
102
|
+
</GridLayout>
|
|
103
|
+
</v-template>
|
|
104
|
+
</Pager>
|
|
105
|
+
</template>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Static Views
|
|
109
|
+
|
|
110
|
+
```html
|
|
111
|
+
<Pager height="100%" :selectedIndex="1">
|
|
112
|
+
<PagerItem backgroundColor="red"> <label text="First"></label> </PagerItem>
|
|
113
|
+
<PagerItem backgroundColor="white"> <label text="Second"></label> </PagerItem>
|
|
114
|
+
<PagerItem backgroundColor="black">
|
|
115
|
+
<label text="Third" color="white"></label>
|
|
116
|
+
</PagerItem>
|
|
117
|
+
<PagerItem backgroundColor="green"> <label text="Fourth"></label> </PagerItem>
|
|
118
|
+
</Pager>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### Angular
|
|
122
|
+
|
|
123
|
+
```js
|
|
124
|
+
import { PagerModule } from "@nativescript-community/ui-pager/angular";
|
|
125
|
+
|
|
126
|
+
@NgModule({
|
|
127
|
+
imports: [
|
|
128
|
+
PagerModule
|
|
129
|
+
],
|
|
130
|
+
declarations: [
|
|
131
|
+
AppComponent
|
|
132
|
+
],
|
|
133
|
+
bootstrap: [AppComponent]
|
|
134
|
+
})
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
_Angular v2_
|
|
138
|
+
|
|
139
|
+
```html
|
|
140
|
+
<Pager
|
|
141
|
+
[items]="items"
|
|
142
|
+
#pager
|
|
143
|
+
[selectedIndex]="currentPagerIndex"
|
|
144
|
+
(selectedIndexChange)="onIndexChanged($event)"
|
|
145
|
+
class="pager"
|
|
146
|
+
>
|
|
147
|
+
<template let-i="index" let-item="item">
|
|
148
|
+
<GridLayout
|
|
149
|
+
class="pager-item"
|
|
150
|
+
rows="auto, *"
|
|
151
|
+
columns="*"
|
|
152
|
+
backgroundColor="red"
|
|
153
|
+
>
|
|
154
|
+
<label [text]="item.title"></label>
|
|
155
|
+
<image row="1" [src]="item.image"></image>
|
|
156
|
+
</GridLayout>
|
|
157
|
+
</template>
|
|
158
|
+
</Pager>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
_Angular v4+_
|
|
162
|
+
|
|
163
|
+
```html
|
|
164
|
+
<Pager
|
|
165
|
+
[items]="items"
|
|
166
|
+
#pager
|
|
167
|
+
[selectedIndex]="currentPagerIndex"
|
|
168
|
+
(selectedIndexChange)="onIndexChanged($event)"
|
|
169
|
+
class="pager"
|
|
170
|
+
>
|
|
171
|
+
<ng-template let-i="index" let-item="item">
|
|
172
|
+
<GridLayout
|
|
173
|
+
class="pager-item"
|
|
174
|
+
rows="auto, *"
|
|
175
|
+
columns="*"
|
|
176
|
+
backgroundColor="red"
|
|
177
|
+
>
|
|
178
|
+
<label [text]="item.title"></label>
|
|
179
|
+
<image row="1" [src]="item.image"></image>
|
|
180
|
+
</GridLayout>
|
|
181
|
+
</ng-template>
|
|
182
|
+
</Pager>
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### Multi Template
|
|
186
|
+
|
|
187
|
+
```ts
|
|
188
|
+
public templateSelector = (item: any, index: number, items: any) => {
|
|
189
|
+
return index % 2 === 0 ? 'even' : 'odd';
|
|
190
|
+
}
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
```html
|
|
194
|
+
<Pager
|
|
195
|
+
row="1"
|
|
196
|
+
[items]="items | async"
|
|
197
|
+
[itemTemplateSelector]="templateSelector"
|
|
198
|
+
#pager
|
|
199
|
+
[selectedIndex]="currentPagerIndex"
|
|
200
|
+
(selectedIndexChange)="onIndexChanged($event)"
|
|
201
|
+
class="pager"
|
|
202
|
+
backgroundColor="lightsteelblue"
|
|
203
|
+
>
|
|
204
|
+
<ng-template pagerTemplateKey="even" let-i="index" let-item="item">
|
|
205
|
+
<GridLayout class="pager-item" rows="auto,auto,*" columns="*">
|
|
206
|
+
<label text="Even"></label> <label row="1" [text]="item.title"></label>
|
|
207
|
+
<image loaded="loadedImage" row="2" [src]="item.image"></image>
|
|
208
|
+
</GridLayout>
|
|
209
|
+
</ng-template>
|
|
210
|
+
|
|
211
|
+
<ng-template pagerTemplateKey="odd" let-i="index" let-item="item">
|
|
212
|
+
<GridLayout
|
|
213
|
+
class="pager-item"
|
|
214
|
+
rows="auto,auto,auto,*"
|
|
215
|
+
columns="*"
|
|
216
|
+
backgroundColor="white"
|
|
217
|
+
>
|
|
218
|
+
<label text="Odd"></label> <label row="1" [text]="item.title"></label>
|
|
219
|
+
<StackLayout row="2"> <label [text]="item.image"></label> </StackLayout>
|
|
220
|
+
<image loaded="loadedImage" row="3" [src]="item.image"></image>
|
|
221
|
+
</GridLayout>
|
|
222
|
+
</ng-template>
|
|
223
|
+
</Pager>
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
### Static Views
|
|
227
|
+
|
|
228
|
+
```html
|
|
229
|
+
<Pager
|
|
230
|
+
backgroundColor="orange"
|
|
231
|
+
row="1"
|
|
232
|
+
#pager
|
|
233
|
+
[selectedIndex]="1"
|
|
234
|
+
height="100%"
|
|
235
|
+
>
|
|
236
|
+
<StackLayout *pagerItem backgroundColor="red">
|
|
237
|
+
<label text="First"></label>
|
|
238
|
+
</StackLayout>
|
|
239
|
+
<StackLayout *pagerItem backgroundColor="white">
|
|
240
|
+
<label text="Second"></label>
|
|
241
|
+
</StackLayout>
|
|
242
|
+
<StackLayout *pagerItem backgroundColor="black">
|
|
243
|
+
<label text="Third" color="white"></label>
|
|
244
|
+
</StackLayout>
|
|
245
|
+
<StackLayout *pagerItem backgroundColor="green">
|
|
246
|
+
<label text="Fourth"></label>
|
|
247
|
+
</StackLayout>
|
|
248
|
+
</Pager>
|
|
249
|
+
```
|
|
250
|
+
### React
|
|
251
|
+
|
|
252
|
+
```typescript jsx
|
|
253
|
+
import {$Pager} from '@nativescript-community/ui-pager/react';
|
|
254
|
+
return (
|
|
255
|
+
<$Pager
|
|
256
|
+
height={{ unit: "%", value: 100 }}
|
|
257
|
+
selectedIndex={this.selectedIndex}
|
|
258
|
+
selectedIndexChange={this.selectedIndexChange.bind(this)}
|
|
259
|
+
items={this.items}
|
|
260
|
+
cellFactory={
|
|
261
|
+
(item, ref) => {
|
|
262
|
+
return (
|
|
263
|
+
<$StackLayout id={item.title} ref={ref}>
|
|
264
|
+
<$Label text={item.title}/>
|
|
265
|
+
<$ImageCacheIt stretch={'aspectFill'}
|
|
266
|
+
src={item.image}/>
|
|
267
|
+
</$StackLayout>
|
|
268
|
+
);
|
|
269
|
+
}
|
|
270
|
+
}/>
|
|
271
|
+
)
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
### Static Views
|
|
275
|
+
|
|
276
|
+
```typescript jsx
|
|
277
|
+
return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
|
|
278
|
+
<$PagerItem backgroundColor={'red'}>
|
|
279
|
+
<$Label text={'First'}/>
|
|
280
|
+
</$PagerItem>
|
|
281
|
+
<$PagerItem backgroundColor={'white'}>
|
|
282
|
+
<$Label text={'Second'}/>
|
|
283
|
+
</$PagerItem>
|
|
284
|
+
<$PagerItem backgroundColor={'black'}>
|
|
285
|
+
<$Label text={'Third'} color={new Color('white')}/>
|
|
286
|
+
</$PagerItem>
|
|
287
|
+
<$PagerItem backgroundColor={'green'}>
|
|
288
|
+
<$Label text={'Fourth'}/>
|
|
289
|
+
</$PagerItem>
|
|
290
|
+
<$PagerItem backgroundColor={'pink'}>
|
|
291
|
+
<$Label text={'Fifth'}/>
|
|
292
|
+
</$PagerItem>
|
|
293
|
+
</$Pager>)
|
|
294
|
+
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
## Config
|
|
303
|
+
|
|
304
|
+
```xml
|
|
305
|
+
<Pager cache="false" disableSwipe="true" disableAnimation="true" selectedIndex="5">
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
| IOS | Android |
|
|
309
|
+
| --------------------------------------- | -------------------------------------------- |
|
|
310
|
+
|  |  |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nativescript-community/ui-pager",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.29",
|
|
4
4
|
"description": "A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data. ",
|
|
5
5
|
"main": "pager",
|
|
6
6
|
"typings": "pager.d.ts",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
},
|
|
52
52
|
"license": "Apache-2.0",
|
|
53
53
|
"readmeFilename": "README.md",
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "484780992120c84b2b2b514f10d6e3a717d51b68"
|
|
55
55
|
}
|
|
@@ -9,10 +9,10 @@ android {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
dependencies {
|
|
12
|
-
def
|
|
12
|
+
def androidXAppCompat = project.hasProperty("androidXAppCompat") ? project.androidXAppCompat : "1.1.0"
|
|
13
13
|
def androidxViewPager2Version = project.hasProperty("androidxViewPager2Version") ? project.androidxViewPager2Version : "1.0.0"
|
|
14
14
|
|
|
15
|
-
implementation "androidx.appcompat:appcompat:$
|
|
15
|
+
implementation "androidx.appcompat:appcompat:$androidXAppCompat"
|
|
16
16
|
|
|
17
17
|
implementation "androidx.viewpager2:viewpager2:$androidxViewPager2Version"
|
|
18
18
|
|