This ember-cli addon imports the Masonry library and allows you to quickly and easily build masonry grid views.
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.
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:
If we wanted to redefine the itemSelector for Masonry, we'd write the following:
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.
If you want more control over the each masonry-item, you can supply a custom layout to masonry-grid.
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.
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 amasonry-item
If you find an issue or missing functionality, please don't hesistate to open a pull request.
git clonethis repositorynpm installbower install
ember server- Visit your app at http://localhost:4200.
npm test
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
