ember-cli-masonry-grid

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

Installation

ember install ember-cli-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.

You have to choose the use the masonry-grid,

Basic Setup Set up the following in our controller.

import Ember from 'ember';
 
export default Ember.Controller.extend({
    options: Ember.Object.create({
        itemSelector: '.grid-item',
        columnWidth: 250
    }),
    items: Ember.A([
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
    ])
});

And in our template:

{{#masonry-grid
    config=options  // set grid option
    widgets=items     // set grid items
 	as |item|}}
        {{item.name}}
{{/masonry-grid}}

Or you can pass masonry option within the template, like bellow

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
    itemSelector=".grid-item"
    columnWidth=250
    widgets=items
 	as |item|}}
        {{item.name}}
{{/masonry-grid}}

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

Advance Setup

soon...

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/.