@nativescript-community/ui-pager
    TypeScript icon, indicating that this package has built-in type declarations

    13.0.37 • Public • Published

    @nativescript-community/ui-pager

    Downloads per month NPM Version

    A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data.


    iOS Demo Android Demo

    Table of Contents

    Installation

    Run the following command from the root of your project:

    ns plugin add @nativescript-community/ui-pager

    API

    Properties

    Property Type
    items array or ItemsSource
    selectedIndex number
    canGoRight boolean
    canGoLeft boolean
    spacing PercentLengthType
    peaking PercentLengthType
    perPage number
    indicator string ('disable', 'none', 'worm', 'fill', 'swap', 'thin_worm', 'flat')
    circularMode boolean
    autoPlayDelay number
    autoPlay boolean
    orientation string ('horizontal' or 'vertical')
    autoPlay boolean
    disableSwipe boolean
    showIndicator boolean
    indicatorColor Color or string
    indicatorSelectedColor Color or string
    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.
    

    Usage in Angular

    Import the module into your project.

    import { PagerModule } from "@nativescript-community/ui-pager/angular";
    
    @NgModule({
        imports: [
            PagerModule,
        ],
    })

    Examples

    • Static Pager
      • A simple pager example using static content.
    • Basic Pager
      • A simple pager example using dynamic content.

    Usage in React

    Import the module into your project.

    import { Pager } from '@nativescript-community/ui-pager/react';

    Examples

    • Basic Pager
      • A simple pager example using dynamic content.

    Usage in Svelte

    Import the module into your project.

    import { registerNativeViewElement } from 'svelte-native/dom';
    
    import PagerElement from '@nativescript-community/ui-pager/svelte';
    import { PagerItem } from '@nativescript-community/ui-pager';
    
    PagerElement.register();
    registerNativeViewElement('pageritem', () => PagerItem);

    Examples

    • Static Pager
      • A simple pager example using static content.
    • Basic Pager
      • A simple pager example using dynamic content.

    Usage in Vue

    Import the module into your project.

    import Vue from 'nativescript-vue';
    import Pager from '@nativescript-community/ui-pager/vue';
    
    Vue.use(Pager);

    Examples

    • Static Pager
      • A simple pager example using static content.
    • Basic Pager
      • A simple pager example using dynamic content.

    Demos and Development

    Setup

    To run the demos, you must clone this repo recursively.

    git clone https://github.com/@nativescript-community/ui-pager.git --recursive
    

    Install Dependencies:

    npm i # or 'yarn install' or 'pnpm install'

    Interactive Menu:

    To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

    Build

    npm run build
    
    npm run build.angular # or for Angular

    Demos

    npm run demo.[ng|react|svelte|vue].[ios|android]
    
    npm run demo.svelte.ios # Example

    Questions

    If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

    Install

    npm i @nativescript-community/ui-pager

    DownloadsWeekly Downloads

    215

    Version

    13.0.37

    License

    Apache-2.0

    Unpacked Size

    409 kB

    Total Files

    44

    Last publish

    Collaborators

    • sebjean
    • cjohn001
    • edusperoni
    • asharghi
    • farfromrefuge
    • triniwiz
    • eddyverbruggen
    • rigor789
    • nathanaela
    • walkerrunpdx
    • dnr
    • keerl
    • cvietor
    • bradmartin
    • rdlabo
    • tralves