ember-masonry-grid

This ember-cli addon imports the Masonry library and allows you to quickly and easily build masonry grid views.

Installation

ember install ember-masonry-grid

That's it! The Masonry library will automatically be imported in your app, and the masonry-grid component will be available to all of your templates.

Basic Usage

The masonry-grid component accepts all of the options that Masonry exposes. The naming is the same, and any option not specified will use the Masonry default.

For example, if we wanted to a basic masonry layout, we'd set up the following in our controller.

import Ember from 'ember';
 
export default Ember.Controller.extend({
  items: Ember.A([
    { name: 'Item 1' },
    { name: 'Item 2' },
    { name: 'Item 3' }
  ]);
});

And in our template:

{{#masonry-grid items=items as |item|}}
  {{item.name}}
{{/masonry-grid}}

If we wanted to redefine the itemSelector for Masonry, we'd write the following:

{{#masonry-grid items=items itemSelector=".piece" as |item|}}
  {{item.name}}
{{/masonry-grid}}

This would also change the classes for the underlying masonry-item components.

For a full list of options that are exposed, please see the Masonry options.

Custom Layouts

If you want more control over the each masonry-item, you can supply a custom layout to masonry-grid.

{{#masonry-grid items=items customLayout=true as |item index grid|}}
  {{#masonry-item item=item grid=grid }}
    {{item.name}}
  {{/masonry-item}}
{{/masonry-grid}}

Adding and Removing Items from a Masonry Layout

While Masonry exposes prepend, append, and remove methods, we don't have to worry about them. You can add and remove items from your items array and it will have the same effect.

Every time items is updated, Masonry will account for it and generate a new layout.

Available Actions

The following actions are made available by masonry-grid.

• onLayoutComplete (layout)
  Triggered each time Masonry finishes a layout

• onItemClick (event, item)
  Triggered when a click event occurs (or bubbles) on a masonry-item

Contributing

If you find an issue or missing functionality, please don't hesistate to open a pull request.

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• npm test

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.