chore: doc/demo fix for transformers

Author: farfromrefug

demo-snippets/vue/BasicPager.vue

@@ -1,7 +1,7 @@
 <template>
     <Page>
         <ActionBar>
-            <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="$navigateBack" />
+            <NavigationButton text="Back" android.systemIcon="ic_menu_back" />
             <Label text="Basic Pager" />
         </ActionBar>
 

demo-snippets/vue/Transformer.vue

@@ -0,0 +1,51 @@
+<template>
+    <Page>
+        <ActionBar>
+            <NavigationButton text="Back" android.systemIcon="ic_menu_back" />
+            <Label text="Basic Pager" />
+        </ActionBar>
+
+        <StackLayout class="page">
+            <Pager for="item in items" height="100%" transformers="scale">
+                <v-template>
+                    <GridLayout :backgroundColor="item.color">
+                        <Label :text="item.title" />
+                    </GridLayout>
+                </v-template>
+            </Pager>
+        </StackLayout>
+    </Page>
+</template>
+
+<script>
+
+import { Pager } from '@nativescript-community/ui-pager';
+import transformer from '@nativescript-community/ui-pager/transformers/Scale';
+
+Pager.registerTransformer('scale', transformer)
+export default {
+    data() {
+        return {
+            items: [
+                {title: "First", color: "#e67e22"},
+                {title: "Second", color: "#3498db"},
+                {title: "Third", color: "#e74c3c"},
+                {title: "Fourth", color: "#9b59b6"},
+            ]
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.page Label {
+    font-size: 35;
+    text-align: center;
+    width: 100%;
+    vertical-alignment: center;
+    color: #ffffff;
+    text-transform: uppercase;
+}
+
+</style>

demo-snippets/vue/install.ts

@@ -4,6 +4,7 @@ import Pager from '@nativescript-community/ui-pager/vue';
 import StaticPager from './StaticPager.vue';
 import BasicPager from './BasicPager.vue';
 import Indicator from './Indicator.vue';
+import Transformer from './Transformer.vue';
 import RenderIssue from './RenderIssue.vue';
 
 export function installPlugin() {
@@ -14,6 +15,7 @@ export function installPlugin() {
 export const demos = [
     { name: 'Static Pager', path: 'static', component: StaticPager },
     { name: 'Basic Pager', path: 'basic', component: BasicPager },
+    { name: 'Transformer', path: 'Transformer', component: Transformer },
     { name: 'Indicator', path: 'indicator', component: Indicator },
     { name: 'Render Issue', path: 'indicator', component: RenderIssue }
 ];

packages/ui-pager/blueprint.md

@@ -35,6 +35,7 @@ Run the following command from the root of your project:
 | autoPlay | `boolean` |
 | disableSwipe | `boolean` |
 | showIndicator | `boolean` |
+| transformers | `string` |
 
 
 ```
@@ -128,4 +129,4 @@ import transformer from '@nativescript-community/ui-pager/transformers/Scale';
 
 Pager.registerTransformer('scale', transformer)
 ```
-Then you can use that transformer with the `transformer` property of `Pager`
+Then you can use that transformer with the `transformers` property of `Pager`