nativescript-fancy-list-view
by triniwiz | v0.0.9
A Fancy List View
npm i --save nativescript-fancy-list-view
  • Version: 0.0.9
  • GitHub:
  • Downloads:
    • Last Day:   18
    • Last Week:  20
    • Last Month: 52

npm npm Build Status

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

<lv:FancyListView items="{{items}}" row="2" id="listView">
<lv:FancyListView.itemTemplate>
<GridLayout rows="auto, *" columns="*" backgroundColor="red">
<Label text="{{title}}"/>
<Image row="1" src="{{image}}"/>
</GridLayout>
</lv:FancyListView.itemTemplate>
</lv:FancyListView>

Multi Template

<lv:FancyListView itemTemplateSelector="$index % 2 === 0 ? 'even' : 'odd'" items="{{items}}" id="listView">
<FancyListView.itemTemplates>
<template key="even">
<GridLayout rows="auto,auto,*" columns="*">
<Label text="Even"/>
<Label row="1" text="{{title}}"/>
<Image loaded="loadedImage" row="2" src="{{image}}"/>
</GridLayout>
</template>
<template key="odd">
<GridLayout rows="auto,auto ,auto,*" columns="*" backgroundColor="white">
<Label text="Odd"/>
<Label row="1" text="{{title}}"/>
<StackLayout row="2">
<Label text="{{image}}"/>
</StackLayout>
<Image loaded="loadedImage" row="3" src="{{image}}"/>
</GridLayout>
</template>
</FancyListView.itemTemplates>
</lv:FancyListView>

Angular

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

@NgModule({
imports: [
FancyListViewModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})

Angular v2

<FancyListView [items]="items" #listview (itemTap)="onTap($event)" class="listview">
<template let-i="index" let-item="item">
<GridLayout class="list-item" rows="auto, *" columns="*" backgroundColor="red">
<Label [text]="item.title"></Label>
<Image row="1" [src]="item.image"></Image>
</GridLayout>
</template>
</FancyListView>

Angular v4+

<FancyListView [items]="items" #listView (itemTap)="onTap($event)" class="listview">
<ng-template let-i="index" let-item="item">
<GridLayout class="list-item" rows="auto, *" columns="*" backgroundColor="red">
<Label [text]="item.title"></Label>
<Image row="1" [src]="item.image"></Image>
</GridLayout>
</ng-template>
</FancyListView>

Multi Template

 public templateSelector = (item: any, index: number, items: any) => {
return index % 2 === 0 ? 'even' : 'odd';
}
<FancyListView [items]="items | async" [itemTemplateSelector]="templateSelector"  #listView (itemTap)="onTap($event)" class="listview">
<ng-template flvTemplateKey="even" let-i="index" let-item="item">
<GridLayout class="list-item" rows="auto,auto,*" columns="*">
<Label text="Even"></Label>
<Label row="1" [text]="item.title"></Label>
<Image loaded="loadedImage" row="2" [src]="item.image"></Image>
</GridLayout>
</ng-template>

<ng-template flvTemplateKey="odd" let-i="index" let-item="item">
<GridLayout class="list-item" rows="auto,auto,auto,*" columns="*" backgroundColor="white">
<Label text="Odd"></Label>
<Label row="1" [text]="item.title"></Label>
<StackLayout row="2">
<Label [text]="item.image"></Label>
</StackLayout>
<Image loaded="loadedImage" row="3" [src]="item.image" ></Image>
</GridLayout>
</ng-template>

</FancyListView>

Configuration

<FancyListView items="{{items}}" itemWidth="25%" itemHeight="50%" max="75%" min="20%" spanCount="2" layoutType="grid"><FancyListView>

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!!