Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peterstaev/nativescript-grid-view
A NatvieScript GridView widget.
https://github.com/peterstaev/nativescript-grid-view
android grid gridview ios nativescript uicollectionview
Last synced: 3 months ago
JSON representation
A NatvieScript GridView widget.
- Host: GitHub
- URL: https://github.com/peterstaev/nativescript-grid-view
- Owner: PeterStaev
- License: apache-2.0
- Created: 2015-09-17T09:14:48.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-05-14T07:15:21.000Z (over 4 years ago)
- Last Synced: 2024-09-27T09:21:36.986Z (3 months ago)
- Topics: android, grid, gridview, ios, nativescript, uicollectionview
- Language: TypeScript
- Size: 6.64 MB
- Stars: 49
- Watchers: 7
- Forks: 28
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**This repo only supports NativeScript pre-6.0. The latest version of the plugin supporting NS 6+ is availble as part of [ProPlugins](https://proplugins.org).**
# NativeScript GridView widget
[](https://travis-ci.org/PeterStaev/NativeScript-Grid-View)
[](https://www.npmjs.com/package/nativescript-grid-view)
[](https://www.npmjs.com/package/nativescript-grid-view)
[](https://www.npmjs.com/package/nativescript-grid-view)
A NativeScript GridView widget. The GridView displays data in separate cells, each cell representing one data item. For iOS wraps up [UICollectionView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionView_class/) and for Android wraps up [RecyclerView](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html)
## Screenshot
## Installation
Run the following command from the root of your project:
`tns plugin add nativescript-grid-view`
This command automatically installs the necessary files, as well as stores nativescript-grid-view as a dependency in your project's package.json file.
## Configuration
There is no additional configuration needed!
## API
### Events
* **itemLoading**
Triggered when generating an item in the GridView.
* **itemTap**
Triggered when the user taps on an item in the GridView.
* **loadMoreItems**
Triggered when the generated items reached the end of the items property.
* **scroll**
Triggered when the GrdiView is scrolled by the user. from the `args` you can get the new horizonta/vertical offset.
### Static Properties
* **itemLoadingEvent** - *String*
String value used when hooking to itemLoadingEvent event.
* **itemTapEvent** - *String*
String value used when hooking to itemTapEvent event.
* **loadMoreItemsEvent** - *String*
String value used when hooking to itemTapEvent event.
* **scrollEvent** - *String*
String value used when hooking to scroll event.
### Instance Properties
* **ios** - *[UICollectionView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionView_class/)*
Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS.
* **android** - *[android.support.v7.widget.RecyclerView](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html)*
Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.
* **items** - *Array | ItemsSource*
Gets or sets the items collection of the GridView. The items property can be set to an array or an object defining length and getItem(index) method.
* **itemTemplate** - *String*
Gets or sets the item template of the GridView.
* **rowHeight** - *PercentLength*
Gets or sets the height for every row in the GridView.
* **colWidth** - *PercentLength*
Gets or sets the width for every column in the GridView.
### Instance Methods
* **refresh()**
Forces the GridView to reload all its items.
* **scrollToIndex(index: number, animated: boolean = true)**
Scrolls the GridView to the item with the given index. This can be either animated or not. Defaults to animated.
## Usage
You need to add `xmlns:gv="nativescript-grid-view"` to your page tag, and then simply use `` in order to add the widget to your page. Use `` to specify the template for each cell:
```xml
```
```ts
// test-page.ts
import { EventData, Observable } from "data/observable";
import { ObservableArray } from "data/observable-array";
import { Page } from "ui/page";
import { GridItemEventData } from "nativescript-grid-view";
let viewModel: Observable;
export function pageLoaded(args: EventData) {
const page = args.object as Page;
const items = new ObservableArray();
for (let loop = 0; loop < 200; loop++) {
items.push({ value: "test " + loop.toString() });
}
viewModel = new Observable();
viewModel.set("items", items);
page.bindingContext = viewModel;
}
export function gridViewItemTap(args: GridItemEventData) {
console.log("tap index " + args.index.toString());
}
export function gridViewItemLoading(args: GridItemEventData) {
console.log("item loading " + args.index.toString());
}
export function gridViewLoadMoreItems(args: EventData) {
console.log("load more items");
}
```
You can also have multiple templates the same way you add them in the builtin `ListView` control:
```xml
```
```ts
export function templateSelector(item: any, index: number, items: any) {
return index % 2 === 0 ? "even" : "odd";
}
```
## Usage in Angular
Import `GridViewModule` in your `NgModule`:
```typescript
import { GridViewModule } from 'nativescript-grid-view/angular';
@NgModule({
//......
imports: [
//......
GridViewModule,
//......
],
//......
})
```
#### Example Usage
```ts
// app.module.ts
import { GridViewModule } from "nativescript-grid-view/angular";
@NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
GridViewModule,
],
declarations: [
AppComponent,
ItemsComponent,
ItemDetailComponent
],
providers: [
ItemService
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
```
```html
```
If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin `ListView` control.
```html
```
## Demos
This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:
```shell
$ git clone https://github.com/peterstaev/nativescript-grid-view
$ cd nativescript-grid-view
$ npm install
$ npm run demo-ios
```
This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the `-android` instead of the `-ios` sufix.
If you want to run the Angular demo simply use the `demo-ng-` prefix instead of `demo-`.
## Donate
[](https://bit.ly/2AS9QKB)
`bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC`
