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 |
|
|
| 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!! |
-
NativeScript Fancy Calendar NativeScript plugin for iOS and Android. This plugin is not production ready, and there is still a lots of work to do on it. That's why I advise you to use the nativescript
-
This repo only supports NativeScript pre-6.0. The latest version of the plugin supporting NS 6+ is availble as part of ProPlugins. NativeScript Folding List View widget A NativeScript ListView with fo
-
FancyGit is a tool which works for Linux and MAC OS, that changes the terminal prompt in order to show you a few cool git informations when you're working on a git repo. It'll always keep you informed
-
顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。
-
Fancy Schmancy Joystick 是简单的操纵杆，为 Cocos2d v3 而构建的。
-
这个jQuery插件提供一种新颖，有趣的验证码校验方式。它让用户从几种备选的图标中，选中一种拖到一个指定的地方来实现校验。