tilegrid
An almost infinitely scrolling tile display component for variable height and variable width tiles. With built in support for React >= v0.14 and Backbone.js >= v0.9.2
Also compatible with react-datum
What does it do?
The Tilegrid component renders a tile containing it's children for each model in a [Backbone.js] collection.
- supports single select
- supports multi/drag select
- lazily renders tiles
- lazily derenders tiles outside the view port
- supports variable height and width tiles within the same grid
- supports nested Tilegrid components
simple example using React:
// KITTEN_DATA is a static array of data from petfinder api// that gets loaded via script tag for the examplesvar kittenCollection = KITTEN_DATA var MyTilegridDisplay = React
The example above will render one of your MyKittenCard
component per Backbone model in the Backbone collection. The Tilegrid component will make the Backbone model for that tile available as context variable to all ancestors and as a direct react property to MyKittenCard.
simple example without React:
var kittenCollection = KITTEN_DATAvar tileTemplate = "<div/>" var tilegrid = "#kittenTilegrid" kittenCollection tileTemplate { // at this point you can do anything with the tile $tiletext"This kitty's name is " + model }
Tilegrid will take care of rendering and derendering your tiles as they come in and out of user view.
Tilegrid uses a bump-extend strategy for rendering tiles. Tiles are added to the end of the rendering area as the user scrolls down the page. As a result, you can not immediately scroll to the bottom of a large result set. The trade off is that you can easily render tiles that are variable height, variable width or both.
Tilegrid derenders tiles. When the user scrolls up or down in the view, tiles will be derendered that are a configurable distance from the viewport. To derender tiles, height and width fixed and all content in the tile element, html and text, is removed. When the tile is later scrolled back into view, the tile is rendered back into existance and onTileRendered is called again for that tile.
By default, tiles are rendered as display: inline-block
and will render to the size of the content in them. You control styling and preferred styling of tiles via CSS. So, if you wanted tiles like ones on the left of the examples viewer (TODO: link to demo viewer), you could add a css rule that sets the width of the .tile
element. You can also change the display style of the tile to display: block
if you wanted to force one tile per row regardless of viewport width.