Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/triniwiz/nativescript-fancy-list-view

fancylistview listview nativescript

Last synced: 18 days ago
JSON representation

Host: GitHub
URL: https://github.com/triniwiz/nativescript-fancy-list-view
Owner: triniwiz
License: apache-2.0
Created: 2018-01-10T15:01:44.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2018-11-06T01:53:19.000Z (about 6 years ago)
Last Synced: 2024-12-14T00:39:28.630Z (24 days ago)
Topics: fancylistview, listview, nativescript
Language: TypeScript
Size: 3.11 MB
Stars: 11
Watchers: 3
Forks: 3
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        [![npm](https://img.shields.io/npm/v/nativescript-fancy-list-view.svg)](https://www.npmjs.com/package/nativescript-fancy-list-view)

[![npm](https://img.shields.io/npm/dt/nativescript-fancy-list-view.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-fancy-list-view)

[![Build Status](https://travis-ci.org/triniwiz/nativescript-fancy-list-view.svg?branch=master)](https://travis-ci.org/triniwiz/nativescript-fancy-list-view)

# NativeScript FancyListView 🍵

## Install

`tns plugin add nativescript-fancy-list-view`

## Usage

IMPORTANT: Make sure you include `xmlns:lv="nativescript-fancy-list-view"` on the Page element any element can be used in the list

```xml

            

                

                    

                    

                

            

```

### Multi Template

```xml

      

        

          

            

            

            

          

        

        

          

            

            

            

              

            

            

          

        

      

    

```

### Angular

```js

import { FancyListViewModule } from "nativescript-fancy-list-view/angular";

@NgModule({

    imports: [

    FancyListViewModule

    ],

    declarations: [

        AppComponent

    ],

    bootstrap: [AppComponent]

})

```

_Angular v2_

```html

        

            

                

                

            

        

    

```

_Angular v4+_

```html

        

            

                

                

            

        

    

```

### Multi Template

```ts

 public templateSelector = (item: any, index: number, items: any) => {

    return index % 2 === 0 ? 'even' : 'odd';

  }

```

```html

        

            

                

                

                

            

        

        

            

                

                

                

                    

                

                

            

        

    

```

## Configuration

```html

```

## Properties

| Property   | Default                  | Type              | Required                 | Description |

| ---------- | ------------------------ | ----------------- | ------------------------ | ----------- |

| items      | null                     | Array             | 
- [x]  |             |

| itemWidth  | 100%                     | `string / number` | - [ ]  |             |

| itemHeight | 25%                      | `string / number` | - [ ]  |             |

| min        | (itemWidth \* 2) / (1/3) | `string / number` | - [ ]  |             |

| max        | (itemWidth \* 2)         | `string / number` | - [ ]  |             |

| spanCount  | 1                        | number            | - [ ]  |             |

| layoutType | linear                   | string            | - [ ] 
 |             |

| IOS           | Android       |

| ------------- | ------------- |

| Coming Soon!! | Coming Soon!! |