Skip to content

Commit 9b4c599

Browse files
farfromrefugfarfromrefug
committed
Merge branch 'master' of github.com:nativescript-community/ui-pager
2 parents 008494c + cfede99 commit 9b4c599

File tree

15 files changed

+216
-96
lines changed

15 files changed

+216
-96
lines changed

‎CHANGELOG.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,27 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [13.0.37](https://github.com/nativescript-community/ui-pager/compare/v13.0.36...v13.0.37) (2022-05-17)
7+
8+
**Note:** Version bump only for package @nativescript-community/ui-pager
9+
10+
11+
12+
13+
14+
## [13.0.36](https://github.com/nativescript-community/ui-pager/compare/v13.0.35...v13.0.36) (2022-05-17)
15+
16+
17+
### Bug Fixes
18+
19+
* Added missing notify for selectedIndexChangedEvent. ([f92ca87](https://github.com/nativescript-community/ui-pager/commit/f92ca875a3b90b751e4f428bd7f18b96b4ff3360))
20+
* **android:** Children property inheritance is broken for static pager. ([19e0a49](https://github.com/nativescript-community/ui-pager/commit/19e0a499113eee2e20bb74b256625d545708632f))
21+
* Triggering layout update inside selectedIndexChanged event blocks navigation. ([627c1f7](https://github.com/nativescript-community/ui-pager/commit/627c1f74315f7d3d1c8afff858126713d6c35a7b))
22+
23+
24+
25+
26+
627
## [13.0.35](https://github.com/nativescript-community/ui-pager/compare/v13.0.34...v13.0.35) (2022-03-15)
728

829

‎README.md

Lines changed: 105 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
2121
<h1 align="center">@nativescript-community/ui-pager</h1>
2222
<p align="center">
23-
<a href="https://npmcharts.com/compare/@nativescript-community/ui-pager?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/ui-pager.svg" height="20"/></a>
23+
<a href="https://npmcharts.com/compare/@nativescript-community/ui-pager?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/ui-pager.svg" height="20"/></a>
2424
<a href="https://www.npmjs.com/package/@nativescript-community/ui-pager"><img alt="NPM Version" src="https://img.shields.io/npm/v/@nativescript-community/ui-pager.svg" height="20"/></a>
2525
</p>
2626

@@ -36,48 +36,49 @@
3636
| --- | ----------- |
3737
| iOS Demo | Android Demo |
3838

39-
40-
[](#table-of-contents)
41-
42-
43-
[](#table-of-contents)
44-
39+
40+
[](#table-of-contents)
41+
42+
43+
[](#table-of-contents)
44+
4545
## Table of Contents
4646

47-
* [Installation](#installation)
48-
* [API](#api)
49-
* [Properties](#properties)
50-
* [Usage in Angular](#usage-in-angular)
51-
* [Examples](#examples)
52-
* [Usage in React](#usage-in-react)
53-
* [Examples](#examples-1)
54-
* [Usage in Svelte](#usage-in-svelte)
55-
* [Examples](#examples-2)
56-
* [Usage in Vue](#usage-in-vue)
57-
* [Examples](#examples-3)
58-
* [Demos and Development](#demos-and-development)
59-
* [Setup](#setup)
60-
* [Build](#build)
61-
* [Demos](#demos)
47+
* [Installation](#installation)
48+
* [API](#api)
49+
* [Properties](#properties)
50+
* [Events](#events)
51+
* [Usage in Angular](#usage-in-angular)
52+
* [Examples](#examples)
53+
* [Usage in React](#usage-in-react)
54+
* [Examples](#examples-1)
55+
* [Usage in Svelte](#usage-in-svelte)
56+
* [Examples](#examples-2)
57+
* [Usage in Vue](#usage-in-vue)
58+
* [Examples](#examples-3)
59+
* [Demos and Development](#demos-and-development)
60+
* [Setup](#setup)
61+
* [Build](#build)
62+
* [Demos](#demos)
6263
* [Questions](#questions)
6364

64-
65-
[](#installation)
66-
67-
68-
[](#installation)
69-
65+
66+
[](#installation)
67+
68+
69+
[](#installation)
70+
7071
## Installation
7172
Run the following command from the root of your project:
7273

7374
`ns plugin add @nativescript-community/ui-pager`
7475

75-
76-
[](#api)
77-
78-
79-
[](#api)
80-
76+
77+
[](#api)
78+
79+
80+
[](#api)
81+
8182
## API
8283

8384
### Properties
@@ -107,13 +108,47 @@ Run the following command from the root of your project:
107108
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.
108109
```
109110

111+
### Properties
112+
113+
| Property | Type |
114+
| - | - |
115+
| items | `array` or `ItemsSource`
116+
| selectedIndex | `number` |
117+
| canGoRight | `boolean` |
118+
| canGoLeft | `boolean` |
119+
| spacing | `PercentLengthType` |
120+
| peaking | `PercentLengthType` |
121+
| perPage | `number` |
122+
| indicator | `string` ('disable', 'none', 'worm', 'fill', 'swap', 'thin_worm', 'flat')|
123+
| circularMode | `boolean` |
124+
| autoPlayDelay | `number` |
125+
| autoPlay | `boolean` |
126+
| orientation | `string` ('horizontal' or 'vertical') |
127+
| autoPlay | `boolean` |
128+
| disableSwipe | `boolean` |
129+
| showIndicator | `boolean` |
130+
| indicatorColor | `Color` or `string` |
131+
| indicatorSelectedColor | `Color` or `string` |
132+
133+
### Events
134+
135+
| Event | Type |
136+
| - | - |
137+
| selectedIndexChange | `{ object: View, propertyName: string, oldValue: any, value: any }` |
138+
| scroll | `{ object: View, selectedIndex: number, currentPosition: number, scrollX: number, scrollY: number }` |
139+
| swipe | `{ object: View }` |
140+
| swipeStart | `{ object: View }` |
141+
| swipeOver | `{ object: View }` |
142+
| swipeEnd | `{ object: View }` |
143+
| loadMoreItems | `{ object: View }` |
144+
| itemLoading | `{ object: View, android: any, ios: any, index: number, view: View }` |
145+
| itemDisposing (iOS only) | `{ object: View, android: any, ios: any, index: number, view: View }` |
146+
147+
[](#usage-in-angular)
148+
149+
150+
[](#usage-in-angular)
110151

111-
112-
[](#usage-in-angular)
113-
114-
115-
[](#usage-in-angular)
116-
117152
## Usage in Angular
118153

119154
Import the module into your project.
@@ -135,12 +170,12 @@ import { PagerModule } from "@nativescript-community/ui-pager/angular";
135170
- [Basic Pager](demo-snippets/ng/basic-pager)
136171
- A simple pager example using dynamic content.
137172

138-
139-
[](#usage-in-react)
140-
141-
142-
[](#usage-in-react)
143-
173+
174+
[](#usage-in-react)
175+
176+
177+
[](#usage-in-react)
178+
144179
## Usage in React
145180

146181
Import the module into your project.
@@ -153,12 +188,12 @@ import { Pager } from '@nativescript-community/ui-pager/react';
153188

154189
- [Basic Pager](demo-snippets/react/BasicPager.tsx)
155190
- A simple pager example using dynamic content.
156-
157-
[](#usage-in-svelte)
158-
159-
160-
[](#usage-in-svelte)
161-
191+
192+
[](#usage-in-svelte)
193+
194+
195+
[](#usage-in-svelte)
196+
162197
## Usage in Svelte
163198

164199
Import the module into your project.
@@ -180,12 +215,12 @@ registerNativeViewElement('pageritem', () => PagerItem);
180215
- [Basic Pager](demo-snippets/svelte/BasicPager.svelte)
181216
- A simple pager example using dynamic content.
182217

183-
184-
[](#usage-in-vue)
185-
186-
187-
[](#usage-in-vue)
188-
218+
219+
[](#usage-in-vue)
220+
221+
222+
[](#usage-in-vue)
223+
189224
## Usage in Vue
190225

191226
Import the module into your project.
@@ -205,12 +240,12 @@ Vue.use(Pager);
205240
- A simple pager example using dynamic content.
206241

207242

208-
209-
[](#demos-and-development)
210-
211-
212-
[](#demos-and-development)
213-
243+
244+
[](#demos-and-development)
245+
246+
247+
[](#demos-and-development)
248+
214249
## Demos and Development
215250

216251

@@ -246,12 +281,12 @@ npm run demo.[ng|react|svelte|vue].[ios|android]
246281

247282
npm run demo.svelte.ios # Example
248283
```
249-
250-
[](#questions)
251-
252-
253-
[](#questions)
254-
284+
285+
[](#questions)
286+
287+
288+
[](#questions)
289+
255290
## Questions
256291

257292
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

‎demo-ng

‎demo-react

‎demo-snippets/vue/RenderIssue.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
2+
<template>
3+
<Page>
4+
<ActionBar>
5+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="$navigateBack" />
6+
<Label text="Basic Pager" />
7+
</ActionBar>
8+
9+
<StackLayout class="page">
10+
<Pager for="item in items" height="100%">
11+
<v-template>
12+
<StackLayout marginTop="200">
13+
<StackLayout marginBottom="50">
14+
<Label :text="item.field1" />
15+
<StackLayout v-show="item.field1" backgroundColor="red" height="10" width="10" />
16+
</StackLayout>
17+
<StackLayout marginBottom="50">
18+
<Label :text="item.field2" />
19+
<StackLayout v-show="item.field2" backgroundColor="green" height="10" width="10" />
20+
</StackLayout>
21+
<StackLayout marginBottom="50">
22+
<Label :text="item.field3" />
23+
<StackLayout v-show="item.field3" backgroundColor="blue" height="10" width="10"/>
24+
</StackLayout>
25+
</StackLayout>
26+
</v-template>
27+
</Pager>
28+
</StackLayout>
29+
</Page>
30+
</template>
31+
32+
<script>
33+
export default {
34+
data() {
35+
return {
36+
items: [
37+
{ field1: true, field2: true, field3: true},
38+
{ field1: true, field2: true, field3: false},
39+
{ field1: true, field2: false, field3: true},
40+
{ field1: false, field2: true, field3: true},
41+
{ field1: false, field2: true, field3: true},
42+
{ field1: true, field2: true, field3: false},
43+
]
44+
}
45+
}
46+
};
47+
</script>
48+
49+
<style lang="scss" scoped>
50+
51+
</style>

‎demo-snippets/vue/install.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Pager from '@nativescript-community/ui-pager/vue';
44
import StaticPager from './StaticPager.vue';
55
import BasicPager from './BasicPager.vue';
66
import Indicator from './Indicator.vue';
7+
import RenderIssue from './RenderIssue.vue';
78

89
export function installPlugin() {
910
Vue.use(Pager);
@@ -12,5 +13,6 @@ export function installPlugin() {
1213
export const demos = [
1314
{ name: 'Static Pager', path: 'static', component: StaticPager },
1415
{ name: 'Basic Pager', path: 'basic', component: BasicPager },
15-
{ name: 'Indicator', path: 'indicator', component: Indicator }
16+
{ name: 'Indicator', path: 'indicator', component: Indicator },
17+
{ name: 'Render Issue', path: 'indicator', component: RenderIssue }
1618
];

‎demo-svelte

‎demo-vue

‎lerna.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"packages": [
33
"packages/*"
44
],
5-
"version": "13.0.35",
5+
"version": "13.0.37",
66
"command": {
77
"publish": {
88
"conventionalCommits": true

‎packages/ui-pager/CHANGELOG.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,22 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [13.0.37](https://github.com/nativescript-community/ui-pager/compare/v13.0.36...v13.0.37) (2022-05-17)
7+
8+
**Note:** Version bump only for package @nativescript-community/ui-pager
9+
10+
11+
12+
13+
14+
## [13.0.36](https://github.com/nativescript-community/ui-pager/compare/v13.0.35...v13.0.36) (2022-05-17)
15+
16+
**Note:** Version bump only for package @nativescript-community/ui-pager
17+
18+
19+
20+
21+
622
## [13.0.35](https://github.com/nativescript-community/ui-pager/compare/v13.0.34...v13.0.35) (2022-03-15)
723

824
**Note:** Version bump only for package @nativescript-community/ui-pager

0 commit comments

Comments
 (0)