Ember-masonry-grid NPM

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