Skip to content

Commit 7d3932b

Browse files
farfromrefugfarfromrefug
committed
Update README.md
1 parent a2dc89c commit 7d3932b

File tree

1 file changed

+133
-106
lines changed

1 file changed

+133
-106
lines changed

‎README.md

Lines changed: 133 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,66 @@
1-
<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️--><!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
1+
<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
2+
[](#demos-and-development)
3+
4+
## Demos and Development
5+
6+
7+
### Repo Setup
8+
9+
The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
10+
11+
To develop and test:
12+
if you use `yarn` then run `yarn`
13+
if you use `pnpm` then run `pnpm i`
14+
15+
**Interactive Menu:**
16+
17+
To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
18+
19+
### Build
20+
21+
```bash
22+
npm run build.all
23+
```
24+
25+
### Demos
26+
27+
```bash
28+
npm run demo.[ng|react|svelte|vue].[ios|android]
29+
30+
npm run demo.svelte.ios # Example
31+
```
32+
33+
34+
[](#contributing)
35+
36+
## Contributing
37+
38+
### Update repo
39+
40+
You can update the repo files quite easily
41+
42+
First update the submodules
43+
44+
```bash
45+
npm run update
46+
```
47+
48+
Then commit the changes
49+
Then update common files
50+
51+
```bash
52+
npm run sync
53+
```
54+
Then you can run `yarn|pnpm`, commit changed files if any
55+
56+
### Publish
57+
58+
The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
59+
Simply run
60+
```shell
61+
npm run publish
62+
```
63+
<br><br><!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
264
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
365
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
466
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@@ -20,7 +82,7 @@
2082
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
2183
<h1 align="center">@nativescript-community/ui-pager</h1>
2284
<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>
85+
<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>
2486
<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>
2587
</p>
2688

@@ -36,49 +98,48 @@
3698
| --- | ----------- |
3799
| iOS Demo | Android Demo |
38100

39-
40-
[](#table-of-contents)
41-
42-
43-
[](#table-of-contents)
44-
101+
102+
[](#table-of-contents)
103+
104+
105+
[](#table-of-contents)
106+
45107
## Table of Contents
46108

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)
109+
* [Installation](#installation)
110+
* [API](#api)
111+
* [Properties](#properties)
112+
* [Usage in Angular](#usage-in-angular)
113+
* [Examples](#examples)
114+
* [Usage in React](#usage-in-react)
115+
* [Examples](#examples-1)
116+
* [Usage in Svelte](#usage-in-svelte)
117+
* [Examples](#examples-2)
118+
* [Usage in Vue](#usage-in-vue)
119+
* [Examples](#examples-3)
120+
* [Demos and Development](#demos-and-development)
121+
* [Setup](#setup)
122+
* [Build](#build)
123+
* [Demos](#demos)
63124
* [Questions](#questions)
64125

65-
66-
[](#installation)
67-
68-
69-
[](#installation)
70-
126+
127+
[](#installation)
128+
129+
130+
[](#installation)
131+
71132
## Installation
72133
Run the following command from the root of your project:
73134

74135
`ns plugin add @nativescript-community/ui-pager`
75136

76-
77-
[](#api)
78-
79-
80-
[](#api)
81-
137+
138+
[](#api)
139+
140+
141+
[](#api)
142+
82143
## API
83144

84145
### Properties
@@ -108,47 +169,13 @@ Run the following command from the root of your project:
108169
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.
109170
```
110171

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)
151172

173+
174+
[](#usage-in-angular)
175+
176+
177+
[](#usage-in-angular)
178+
152179
## Usage in Angular
153180

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

173-
174-
[](#usage-in-react)
175-
176-
177-
[](#usage-in-react)
178-
200+
201+
[](#usage-in-react)
202+
203+
204+
[](#usage-in-react)
205+
179206
## Usage in React
180207

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

189216
- [Basic Pager](demo-snippets/react/BasicPager.tsx)
190217
- A simple pager example using dynamic content.
191-
192-
[](#usage-in-svelte)
193-
194-
195-
[](#usage-in-svelte)
196-
218+
219+
[](#usage-in-svelte)
220+
221+
222+
[](#usage-in-svelte)
223+
197224
## Usage in Svelte
198225

199226
Import the module into your project.
@@ -215,12 +242,12 @@ registerNativeViewElement('pageritem', () => PagerItem);
215242
- [Basic Pager](demo-snippets/svelte/BasicPager.svelte)
216243
- A simple pager example using dynamic content.
217244

218-
219-
[](#usage-in-vue)
220-
221-
222-
[](#usage-in-vue)
223-
245+
246+
[](#usage-in-vue)
247+
248+
249+
[](#usage-in-vue)
250+
224251
## Usage in Vue
225252

226253
Import the module into your project.
@@ -240,12 +267,12 @@ Vue.use(Pager);
240267
- A simple pager example using dynamic content.
241268

242269

243-
244-
[](#demos-and-development)
245-
246-
247-
[](#demos-and-development)
248-
270+
271+
[](#demos-and-development)
272+
273+
274+
[](#demos-and-development)
275+
249276
## Demos and Development
250277

251278

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

282309
npm run demo.svelte.ios # Example
283310
```
284-
285-
[](#questions)
286-
287-
288-
[](#questions)
289-
311+
312+
[](#questions)
313+
314+
315+
[](#questions)
316+
290317
## Questions
291318

292319
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).

0 commit comments

Comments
 (0)