@@ -272,10 +272,14 @@ <h1 align="center">@nativescript-community/ui-pager-indicator</h1>
272
272
< li > < a href ="#md:properties "> Properties</ a > </ li >
273
273
</ ul >
274
274
</ 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 >
276
276
< li > < a href ="#md:examples "> Examples</ a > </ li >
277
277
</ ul >
278
278
</ 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 >
279
283
</ ul >
280
284
< p > < a href ="#md:installation "> </ a > </ p >
281
285
< p > < a href ="#md:installation "> </ a > </ p >
@@ -301,6 +305,20 @@ <h1 align="center">@nativescript-community/ui-pager-indicator</h1>
301
305
</ tbody > </ table >
302
306
< 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 >
303
307
</ 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 "> "@nativescript/angular"</ 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 "> "@nativescript-community/ui-pager-indicator"</ span > < span class ="hl-1 "> ;</ span > < br /> < span class ="hl-6 "> registerElement</ span > < span class ="hl-1 "> (</ span > < span class ="hl-5 "> "PagerIndicator"</ span > < span class ="hl-1 "> , () </ span > < span class ="hl-2 "> =></ 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 "> <</ 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 "> "pager"</ span > < span class ="hl-1 "> </ span > < span class ="hl-9 "> [items]</ span > < span class ="hl-1 "> =</ span > < span class ="hl-10 "> "items"</ span > < br /> < span class ="hl-1 "> </ span > < span class ="hl-9 "> ...</ span > < br /> < span class ="hl-8 "> </Pager</ span > < span class ="hl-7 "> ></ span > < br /> < span class ="hl-7 "> <</ 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 "> "pager"</ span > < span class ="hl-7 "> /></ 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 >
304
322
< p > < a href ="#md:usage-in-vue "> </ a > </ p >
305
323
< p > < a href ="#md:usage-in-vue "> </ a > </ p >
306
324
< 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>
309
327
< p > then in your template:</ p >
310
328
< pre > < code class ="language-html "> < span class ="hl-7 "> <</ 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 "> "pager"</ span > < span class ="hl-1 "> </ span > < span class ="hl-9 "> :items</ span > < span class ="hl-1 "> =</ span > < span class ="hl-10 "> "items"</ span > < br /> < span class ="hl-1 "> </ span > < span class ="hl-9 "> ...</ span > < br /> < span class ="hl-8 "> </Pager</ span > < span class ="hl-7 "> ></ span > < br /> < span class ="hl-7 "> <</ 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 "> "pager"</ span > < span class ="hl-7 "> /></ span >
311
329
</ 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 >
313
331
< li > < a href ="demo-snippets/vue/Indicator.vue "> Indicator Pager</ a > < ul >
314
332
< li > A simple pager example using dynamic content and indicator.</ details > </ li >
315
333
</ ul >
@@ -357,4 +375,4 @@ <h1 align="center">@nativescript-community/ui-pager-indicator</h1>
357
375
</ code > < button > Copy</ button > </ pre >
358
376
< p > < a href ="#md:questions "> </ a > </ p >
359
377
< 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