Skip to content

Commit 49196e9

Browse files
farfromrefugfarfromrefug
committed
Merge branch 'master' of github.com:nativescript-community/ui-pager
# Conflicts: # .npmrc # package.json
2 parents b932665 + 106c4b5 commit 49196e9

23 files changed

+324
-63
lines changed

‎.gitmodules

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
[submodule "tools"]
22
path = tools
33
url = [email protected]:nativescript-community/plugin-seed-tools.git
4-
ignore = dirty
5-
[submodule "demo-vue"]
6-
path = demo-vue
7-
url = [email protected]:nativescript-community/plugin-seed-demo-vue.git
8-
ignore = dirty
9-
[submodule "demo-svelte"]
10-
path = demo-svelte
11-
url = [email protected]:nativescript-community/plugin-seed-demo-svelte.git
12-
ignore = dirty
13-
[submodule "demo-react"]
14-
path = demo-react
15-
url = [email protected]:nativescript-community/plugin-seed-demo-react.git
16-
ignore = dirty
174
[submodule "demo-ng"]
185
path = demo-ng
19-
url = [email protected]:nativescript-community/plugin-seed-demo-ng.git
20-
ignore = dirty
6+
url = [email protected]:nativescript-community/plugin-seed-demo-ng.git
7+
[submodule "demo-react"]
8+
path = demo-react
9+
url = [email protected]:nativescript-community/plugin-seed-demo-react.git
10+
[submodule "demo-svelte"]
11+
path = demo-svelte
12+
url = [email protected]:nativescript-community/plugin-seed-demo-svelte.git
13+
[submodule "demo-vue"]
14+
path = demo-vue
15+
url = [email protected]:nativescript-community/plugin-seed-demo-vue.git

‎.npmrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
shamefully-hoist=true
22
strict-peer-dependencies=false
3-
loglevel=error
3+
loglevel=error

‎CHANGELOG.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,28 @@
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.35](https://github.com/nativescript-community/ui-pager/compare/v13.0.34...v13.0.35) (2022-03-15)
7+
8+
9+
### Bug Fixes
10+
11+
* **android:** set indicator properly ([7836e84](https://github.com/nativescript-community/ui-pager/commit/7836e84c81e1372d565b3e7a41dd7d70c7651155))
12+
13+
14+
15+
16+
17+
## [13.0.34](https://github.com/nativescript-community/ui-pager/compare/v13.0.33...v13.0.34) (2022-01-19)
18+
19+
20+
### Bug Fixes
21+
22+
* better suited ios indicator size ([81941e6](https://github.com/nativescript-community/ui-pager/commit/81941e6eb555a176a25ebc363ae91463eb38b5e4))
23+
24+
25+
26+
27+
628
## [13.0.33](https://github.com/nativescript-community/ui-pager/compare/v13.0.32...v13.0.33) (2021-11-17)
729

830

‎demo-snippets/ng/indicator/indicator.component.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<ActionBar>
2+
<NavigationButton android.systemIcon="ic_menu_back" (tap)="goBack()"></NavigationButton>
3+
<Label text="Indicator"></Label>
4+
</ActionBar>
5+
6+
<StackLayout>
7+
<Pager
8+
[items]="items"
9+
height="300"
10+
[selectedIndex]="selectedIndex"
11+
(selectedIndexChange)="onIndexChanged($event)"
12+
indicator="fill"
13+
showIndicator="true"
14+
>
15+
<ng-template let-i="index" let-item="item">
16+
<GridLayout
17+
[backgroundColor]="item.color"
18+
>
19+
<Label class="label" [text]="item.title"></Label>
20+
</GridLayout>
21+
</ng-template>
22+
</Pager>
23+
<Button text="Reset" (tap)="resetPager()"></Button>
24+
</StackLayout>

‎demo-snippets/ng/indicator/indicator.component.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.label {
2+
font-size: 35;
3+
text-align: center;
4+
width: 100%;
5+
vertical-alignment: center;
6+
color: #FFFFFF;
7+
text-transform: uppercase;
8+
}

‎demo-snippets/ng/indicator/indicator.component.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { RouterExtensions } from '@nativescript/angular';
3+
4+
@Component({
5+
selector: 'ns-indicator',
6+
templateUrl: './indicator.component.html',
7+
styleUrls: ["./indicator.component.scss"],
8+
})
9+
export class IndicatorComponent implements OnInit {
10+
selectedIndex = 0;
11+
12+
constructor(private router: RouterExtensions) {}
13+
14+
items = [
15+
{
16+
title: "First",
17+
color: "#e67e22"
18+
},
19+
{
20+
title: "Second",
21+
color: "#3498db"
22+
},
23+
{
24+
title: "Third",
25+
color: "#e74c3c"
26+
},
27+
{
28+
title: "Fourth",
29+
color: "#9b59b6"
30+
}
31+
];
32+
33+
ngOnInit(): void {}
34+
35+
goBack(): void {
36+
this.router.back();
37+
}
38+
resetPager() {
39+
this.selectedIndex = 0;
40+
}
41+
onIndexChanged(event: any): void {
42+
this.selectedIndex = event.value;
43+
}
44+
}

‎demo-snippets/ng/install.module.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { PagerModule } from "@nativescript-community/ui-pager/angular";
44

55
import { StaticPagerComponent } from './static-pager/static-pager.component';
66
import { BasicPagerComponent } from './basic-pager/basic-pager.component';
7+
import { IndicatorComponent } from './indicator/indicator.component';
78

8-
export const COMPONENTS = [StaticPagerComponent, BasicPagerComponent];
9+
export const COMPONENTS = [StaticPagerComponent, BasicPagerComponent, IndicatorComponent];
910
@NgModule({
1011
imports: [PagerModule],
1112
exports: [PagerModule],
@@ -17,6 +18,7 @@ export function installPlugin() { }
1718

1819
export const demos = [
1920
{ name: 'Static Pager', path: 'static-pager', component: StaticPagerComponent },
20-
{ name: 'Basic Pager', path: 'basic-pager', component: BasicPagerComponent }
21+
{ name: 'Basic Pager', path: 'basic-pager', component: BasicPagerComponent },
22+
{ name: 'Indicator', path: 'indicator', component: IndicatorComponent }
2123
];
2224

‎demo-snippets/react/Indicator.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import * as React from 'react';
2+
import { Pager } from '@nativescript-community/ui-pager/react';
3+
4+
const items = [
5+
{title: "First", color: "#e67e22"},
6+
{title: "Second", color: "#3498db"},
7+
{title: "Third", color: "#e74c3c"},
8+
{title: "Fourth", color: "#9b59b6"},
9+
];
10+
11+
interface Item {
12+
title: string;
13+
color: string;
14+
}
15+
16+
const cellFactory = (item: Item) => (
17+
<gridLayout backgroundColor={item.color} height={{ unit: "%", value: 100 }}>
18+
<label
19+
//@ts-ignore
20+
width="100%"
21+
text={item.title}
22+
textAlignment={"center"}
23+
verticalAlignment={"middle"}
24+
fontSize={35}
25+
textTransform={"uppercase"}
26+
color={"white"} />
27+
</gridLayout>
28+
);
29+
30+
export function Indicator() {
31+
return (
32+
<stackLayout>
33+
<Pager
34+
height={{ unit: "dip", value: 300 }}
35+
items={items}
36+
indicator="fill"
37+
showIndicator={true}
38+
cellFactory={cellFactory} />
39+
</stackLayout>
40+
);
41+
}

‎demo-snippets/react/install.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { BasicPager } from './BasicPager';
2+
import { Indicator } from './Indicator';
23

34
export function installPlugin() { }
45

56
export const demos = [
6-
{ name: 'Basic Pager', path: 'basic', component: BasicPager }
7+
{ name: 'Basic Pager', path: 'basic', component: BasicPager },
8+
{ name: 'Indicator', path: 'indicator', component: Indicator }
79
];

‎demo-snippets/svelte/Indicator.svelte

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script lang="typescript">
2+
import { goBack } from 'svelte-native';
3+
import { Template } from 'svelte-native/components';
4+
5+
const items = [
6+
{ title: 'First', color: '#e67e22' },
7+
{ title: 'Second', color: '#3498db' },
8+
{ title: 'Third', color: '#e74c3c' },
9+
{ title: 'Fourth', color: '#9b59b6' }
10+
];
11+
</script>
12+
13+
<page>
14+
<actionBar title="Indicator">
15+
<navigationButton text="Go back" on:tap={() => goBack()} />
16+
</actionBar>
17+
<stackLayout class="page">
18+
<pager {items} height="300" indicator="fill" showIndicator="true">
19+
<Template let:item>
20+
<gridlayout backgroundColor={item.color}>
21+
<label class="label" text={item.title} />
22+
</gridlayout>
23+
</Template>
24+
</pager>
25+
</stackLayout>
26+
</page>
27+
28+
<style>
29+
.label {
30+
font-size: 35;
31+
width: 100%;
32+
text-align: center;
33+
vertical-alignment: center;
34+
color: #ffffff;
35+
text-transform: uppercase;
36+
}
37+
</style>

0 commit comments

Comments
 (0)