ember-cli-gridster v0.1.0
Ember-cli-gridster
This README outlines the details of collaborating on this Ember addon.
Installation
git clone
this repositorynpm install
bower install
Running
ember server
- Visit your app at http://localhost:4200.
Example
{{#gridster-grid grid=gridObj isEditing=isEditing width="1000"}}
{{#each gridItems as |item|}}
{{#gridster-item row=item.row col=item.col x=item.x y=item.y}}
item
{{/gridster-item}}
{{/each}}
{{/gridster-grid}}
How to use
The main grid object
{{#gridster-grid grid=gridObj isEditing=isEditing width="1000"}}
grid
the grid property is the dom object that is set up on init you cab see all of the things that can be done with the gridster see: http://gridster.net/#usage for the useage.
isEditing
this is a property that will add the editing
class to the main grid if set to true. this is useful to add a specific style to the gridster-items if set to true.
Ex.
div .editing ul li{
-webkit-box-shadow: 0 7px 4px #777;
-moz-box-shadow: 0 7px 4px #777;
box-shadow: 0 7px 4px #777;
}
width
this is the property to set the width of the container. the container will be centered automatically.
item
the grid item
{{#gridster-item row=item.row col=item.col x=item.x y=item.y}}
row
the item's vertical position
col
the item's horizontal position
x
the item's width
y
the item's height