https://github.com/tinydesk/angular-tileview
A tile view that uses virtualisation to efficiently display large numbers of cells
https://github.com/tinydesk/angular-tileview
Last synced: 25 days ago
JSON representation
A tile view that uses virtualisation to efficiently display large numbers of cells
- Host: GitHub
- URL: https://github.com/tinydesk/angular-tileview
- Owner: tinydesk
- License: mit
- Created: 2016-04-23T09:29:36.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-03-22T21:59:21.000Z (almost 8 years ago)
- Last Synced: 2026-01-24T13:43:21.996Z (about 2 months ago)
- Language: TypeScript
- Size: 193 KB
- Stars: 10
- Watchers: 4
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-tileview
A tile view that uses virtualisation to efficiently display large numbers of cells.
## Get Started
Install via bower:
```
bower install angular-tileview --save
```
Add dependency:
```javascript
angular.module('myApp', ['td.tileview']);
```
Add component to template:
```html
```
Make sure that both `dist/tileview.js` and `dist/tileview.css` are included in your html file. The most common source of errors in relation to this component is that the css file was not included correctly.
## Demo
[http://tinydesk.github.io/angular-tileview/demo/](http://tinydesk.github.io/angular-tileview/demo/)
## Parameters
### items
Type: `Array` (required)
The data that should be displayed. Each item is associated with one cell in the tileview. The cell will be bound to the data of the corresponding item. There is no restriction on the shape of the items in the array. Any data can be used. Note that though it seems that each item has it's own cell, the component only creates enough dom elements to view all visible items at once and reuses those elements when the user scrolls.
### options
Type: `Object`
The component supports the following options:
#### templateUrl
Type: `String` (required)
Path to a template that is used to render a cell. The template might reference the `item` property which will always points to the item that is displayed in that cell. Note that it is possible to change this property later on, but it must be always the same for all cells.
#### tileSize
Type: `Object` (required)
An object that has two numeric properties `width` and `height` which define the exact size of each cell. Note that it is possible to change this property later on, but it must be always the same for all cells.
#### alignHorizontal
Type: `boolean`. Default: `false`
If set to true, line breaks will be disabled and the items will be aligned in one large row with a horizontal scroll-bar if necessary.
#### onScrollEnd
Type: `function`
A callback that is invoked when the user scrolls to the end of the data. The expression can be optionally triggered in advance by setting the option `scrollEndOffset`.
#### scrollEndOffset
Type: `number`. Default: `0`
The row, counted from the end, that triggers the `scrollEnd` expression.
#### overflow
Type: `number`. Default: `2`
The number of excess rows that are added to the DOM.
#### debounce
Type: `number`. Default: `0`
Debounce while scrolling in milliseconds. A value of `0` is interpreted as no debounce.
#### disablePointerEvents
Type: `number`
Sets `pointer-events` to `none` during scrolling to improve performance. The value of this property is a number indicating the number of milliseconds that the component waits to determine if scrolling has ended.
## Events
### Manual Resize
Event: `td.tileview.resize`
Type: Input
A manual resize will trigger a layout of the tiles if the new size changes the tile configuration.
### Manual Update
Event: `td.tileview.update`
Type: Input
A manual update will always perform a layout, even if the number of tiles stays the same. This can be, for example, used to force an update after the element's direction value has changed.
### Layout
Event: `td.tileview.layout`
Type: Output
This event is emitted by the tileview whenever it performs a layout.