Skip to content

Commit 58e9785

Browse files
author
farfromrefug
committed
readme/doc
1 parent 3a270b3 commit 58e9785

File tree

3 files changed

+53
-5
lines changed

3 files changed

+53
-5
lines changed

README.md

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,8 +273,10 @@ Then you can use that transformer with the `transformers` property of `Pager`
273273
* [Installation](#installation)
274274
* [API](#api)
275275
* [Properties](#properties)
276+
* [Usage in Angular](#usage-in-angular)
277+
* [Examples](#examples)
276278
* [Usage in Vue](#usage-in-vue)
277-
* [Examples](#examples)
279+
* [Examples](#examples-1)
278280

279281

280282
[](#installation)
@@ -307,6 +309,34 @@ Run the following command from the root of your project:
307309
PagerIndicator add page control for Pager or other Paging Views.
308310
```
309311

312+
313+
[](#usage-in-angular)
314+
315+
316+
[](#usage-in-angular)
317+
318+
## Usage in Angular
319+
320+
321+
If you are planning to use an indicator, add the following to your module:
322+
323+
```typescript
324+
import { registerElement } from "@nativescript/angular";
325+
import { PagerIndicator } from "@nativescript-community/ui-pager-indicator";
326+
registerElement("PagerIndicator", () => PagerIndicator)
327+
```
328+
329+
Then in your template:
330+
```html
331+
<Pager id="pager" [items]="items"
332+
...
333+
</Pager>
334+
<PagerIndicator pagerViewId="pager" />
335+
```
336+
337+
### Examples
338+
- [Indicator Pager](demo-snippets/ng/indicator)
339+
- A simple pager example using dynamic content and indicator.
310340

311341

312342
[](#usage-in-vue)

docs/classes/ui_pager.Pager.html

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

docs/index.html

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -272,10 +272,14 @@ <h1 align="center">@nativescript-community/ui-pager-indicator</h1>
272272
<li><a href="#md:properties">Properties</a></li>
273273
</ul>
274274
</li>
275-
<li><a href="#md:usage-in-vue">Usage in Vue</a><ul>
275+
<li><a href="#md:usage-in-angular">Usage in Angular</a><ul>
276276
<li><a href="#md:examples">Examples</a></li>
277277
</ul>
278278
</li>
279+
<li><a href="#md:usage-in-vue">Usage in Vue</a><ul>
280+
<li><a href="#md:examples-1">Examples</a></li>
281+
</ul>
282+
</li>
279283
</ul>
280284
<p><a href="#md:installation"></a></p>
281285
<p><a href="#md:installation"></a></p>
@@ -301,6 +305,20 @@ <h1 align="center">@nativescript-community/ui-pager-indicator</h1>
301305
</tbody></table>
302306
<pre><code><span class="hl-0">PagerIndicator</span><span class="hl-1"> </span><span class="hl-0">add</span><span class="hl-1"> </span><span class="hl-0">page</span><span class="hl-1"> </span><span class="hl-0">control</span><span class="hl-1"> </span><span class="hl-0">for</span><span class="hl-1"> </span><span class="hl-0">Pager</span><span class="hl-1"> </span><span class="hl-0">or</span><span class="hl-1"> </span><span class="hl-0">other</span><span class="hl-1"> </span><span class="hl-0">Paging</span><span class="hl-1"> </span><span class="hl-0">Views</span><span class="hl-1">.</span>
303307
</code><button>Copy</button></pre>
308+
<p><a href="#md:usage-in-angular"></a></p>
309+
<p><a href="#md:usage-in-angular"></a></p>
310+
<a id="md:usage-in-angular-1" class="tsd-anchor"></a><h2><a href="#md:usage-in-angular-1">Usage in Angular</a></h2><p>If you are planning to use an indicator, add the following to your module:</p>
311+
<pre><code class="language-typescript"><span class="hl-4">import</span><span class="hl-1"> { </span><span class="hl-0">registerElement</span><span class="hl-1"> } </span><span class="hl-4">from</span><span class="hl-1"> </span><span class="hl-5">&quot;@nativescript/angular&quot;</span><span class="hl-1">;</span><br/><span class="hl-4">import</span><span class="hl-1"> { </span><span class="hl-0">PagerIndicator</span><span class="hl-1"> } </span><span class="hl-4">from</span><span class="hl-1"> </span><span class="hl-5">&quot;@nativescript-community/ui-pager-indicator&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">registerElement</span><span class="hl-1">(</span><span class="hl-5">&quot;PagerIndicator&quot;</span><span class="hl-1">, () </span><span class="hl-2">=&gt;</span><span class="hl-1"> </span><span class="hl-0">PagerIndicator</span><span class="hl-1">)</span>
312+
</code><button>Copy</button></pre>
313+
<p>Then in your template:</p>
314+
<pre><code class="language-html"><span class="hl-7">&lt;</span><span class="hl-8">Pager</span><span class="hl-1"> </span><span class="hl-9">id</span><span class="hl-1">=</span><span class="hl-10">&quot;pager&quot;</span><span class="hl-1"> </span><span class="hl-9">[items]</span><span class="hl-1">=</span><span class="hl-10">&quot;items&quot;</span><br/><span class="hl-1"> </span><span class="hl-9">...</span><br/><span class="hl-8">&lt;/Pager</span><span class="hl-7">&gt;</span><br/><span class="hl-7">&lt;</span><span class="hl-8">PagerIndicator</span><span class="hl-1"> </span><span class="hl-9">pagerViewId</span><span class="hl-1">=</span><span class="hl-10">&quot;pager&quot;</span><span class="hl-7"> /&gt;</span>
315+
</code><button>Copy</button></pre>
316+
<a id="md:examples-4" class="tsd-anchor"></a><h3><a href="#md:examples-4">Examples</a></h3><ul>
317+
<li><a href="demo-snippets/ng/indicator">Indicator Pager</a><ul>
318+
<li>A simple pager example using dynamic content and indicator.</li>
319+
</ul>
320+
</li>
321+
</ul>
304322
<p><a href="#md:usage-in-vue"></a></p>
305323
<p><a href="#md:usage-in-vue"></a></p>
306324
<a id="md:usage-in-vue-1" class="tsd-anchor"></a><h2><a href="#md:usage-in-vue-1">Usage in Vue</a></h2><p>Import the module into your project.</p>
@@ -309,7 +327,7 @@ <h1 align="center">@nativescript-community/ui-pager-indicator</h1>
309327
<p>then in your template:</p>
310328
<pre><code class="language-html"><span class="hl-7">&lt;</span><span class="hl-8">Pager</span><span class="hl-1"> </span><span class="hl-9">id</span><span class="hl-1">=</span><span class="hl-10">&quot;pager&quot;</span><span class="hl-1"> </span><span class="hl-9">:items</span><span class="hl-1">=</span><span class="hl-10">&quot;items&quot;</span><br/><span class="hl-1"> </span><span class="hl-9">...</span><br/><span class="hl-8">&lt;/Pager</span><span class="hl-7">&gt;</span><br/><span class="hl-7">&lt;</span><span class="hl-8">PagerIndicator</span><span class="hl-1"> </span><span class="hl-9">pagerViewId</span><span class="hl-1">=</span><span class="hl-10">&quot;pager&quot;</span><span class="hl-7">/&gt;</span>
311329
</code><button>Copy</button></pre>
312-
<a id="md:examples-4" class="tsd-anchor"></a><h3><a href="#md:examples-4">Examples</a></h3><ul>
330+
<a id="md:examples-5" class="tsd-anchor"></a><h3><a href="#md:examples-5">Examples</a></h3><ul>
313331
<li><a href="demo-snippets/vue/Indicator.vue">Indicator Pager</a><ul>
314332
<li>A simple pager example using dynamic content and indicator.</details></li>
315333
</ul>
@@ -357,4 +375,4 @@ <h1 align="center">@nativescript-community/ui-pager-indicator</h1>
357375
</code><button>Copy</button></pre>
358376
<p><a href="#md:questions"></a></p>
359377
<a id="md:questions" class="tsd-anchor"></a><h2><a href="#md:questions">Questions</a></h2><p>If you have any questions/issues/comments please feel free to create an issue or start a conversation in the <a href="https://nativescript.org/discord">NativeScript Community Discord</a>.</p>
360-
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></form></div><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:table-of-contents"><span>Table of <wbr/>Contents</span></a><a href="#md:installation"><span>Installation</span></a><a href="#md:api"><span>API</span></a><ul><li><a href="#md:properties"><span>Properties</span></a></li></ul><a href="#md:usage-in-angular"><span>Usage in <wbr/>Angular</span></a><ul><li><a href="#md:examples"><span>Examples</span></a></li></ul><a href="#md:usage-in-react"><span>Usage in <wbr/>React</span></a><ul><li><a href="#md:examples-1"><span>Examples</span></a></li></ul><a href="#md:usage-in-svelte"><span>Usage in <wbr/>Svelte</span></a><ul><li><a href="#md:examples-2"><span>Examples</span></a></li></ul><a href="#md:usage-in-vue"><span>Usage in <wbr/>Vue</span></a><ul><li><a href="#md:examples-3"><span>Examples</span></a></li></ul><a href="#md:custom-transformer"><span>Custom <wbr/>Transformer</span></a><a href="#md:table-of-contents-1"><span>Table of <wbr/>Contents</span></a><a href="#md:installation-1"><span>Installation</span></a><a href="#md:api-1"><span>API</span></a><ul><li><a href="#md:properties-1"><span>Properties</span></a></li></ul><a href="#md:usage-in-vue-1"><span>Usage in <wbr/>Vue</span></a><ul><li><a href="#md:examples-4"><span>Examples</span></a></li></ul><a href="#md:demos-and-development"><span>Demos and <wbr/>Development</span></a><ul><li><a href="#md:repo-setup"><span>Repo <wbr/>Setup</span></a></li><li><a href="#md:build"><span>Build</span></a></li><li><a href="#md:demos"><span>Demos</span></a></li></ul><a href="#md:contributing"><span>Contributing</span></a><ul><li><a href="#md:update-repo"><span>Update repo</span></a></li><li><a href="#md:update-readme"><span>Update readme</span></a></li><li><a href="#md:update-doc"><span>Update doc</span></a></li><li><a href="#md:publish"><span>Publish</span></a></li><li><a href="#md:modifying-submodules"><span>modifying submodules</span></a></li></ul><a href="#md:questions"><span>Questions</span></a></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="index.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>Documentation</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
378+
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></form></div><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:table-of-contents"><span>Table of <wbr/>Contents</span></a><a href="#md:installation"><span>Installation</span></a><a href="#md:api"><span>API</span></a><ul><li><a href="#md:properties"><span>Properties</span></a></li></ul><a href="#md:usage-in-angular"><span>Usage in <wbr/>Angular</span></a><ul><li><a href="#md:examples"><span>Examples</span></a></li></ul><a href="#md:usage-in-react"><span>Usage in <wbr/>React</span></a><ul><li><a href="#md:examples-1"><span>Examples</span></a></li></ul><a href="#md:usage-in-svelte"><span>Usage in <wbr/>Svelte</span></a><ul><li><a href="#md:examples-2"><span>Examples</span></a></li></ul><a href="#md:usage-in-vue"><span>Usage in <wbr/>Vue</span></a><ul><li><a href="#md:examples-3"><span>Examples</span></a></li></ul><a href="#md:custom-transformer"><span>Custom <wbr/>Transformer</span></a><a href="#md:table-of-contents-1"><span>Table of <wbr/>Contents</span></a><a href="#md:installation-1"><span>Installation</span></a><a href="#md:api-1"><span>API</span></a><ul><li><a href="#md:properties-1"><span>Properties</span></a></li></ul><a href="#md:usage-in-angular-1"><span>Usage in <wbr/>Angular</span></a><ul><li><a href="#md:examples-4"><span>Examples</span></a></li></ul><a href="#md:usage-in-vue-1"><span>Usage in <wbr/>Vue</span></a><ul><li><a href="#md:examples-5"><span>Examples</span></a></li></ul><a href="#md:demos-and-development"><span>Demos and <wbr/>Development</span></a><ul><li><a href="#md:repo-setup"><span>Repo <wbr/>Setup</span></a></li><li><a href="#md:build"><span>Build</span></a></li><li><a href="#md:demos"><span>Demos</span></a></li></ul><a href="#md:contributing"><span>Contributing</span></a><ul><li><a href="#md:update-repo"><span>Update repo</span></a></li><li><a href="#md:update-readme"><span>Update readme</span></a></li><li><a href="#md:update-doc"><span>Update doc</span></a></li><li><a href="#md:publish"><span>Publish</span></a></li><li><a href="#md:modifying-submodules"><span>modifying submodules</span></a></li></ul><a href="#md:questions"><span>Questions</span></a></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="index.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>Documentation</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

0 commit comments

Comments
 (0)