Grid layout custom element with drag and drop capabilities
MIT License
A digital frontier...
Grid layout custom element based on ES2015 and Polymer 2.0.
Features:
Example:
<the-grid draggable resizable animated col-count="6" row-count="4" cell-margin="10">
<div class="tile" col="0" row="0" height="1" width="4">
<span resize="right">│</span>
</div>
<div class="tile" col="0" row="1" height="3" width="1">
<span resize="top">─</span>
</div>
<div class="tile" col="4" row="3" height="1" width="1">
<span resize="top-right">┐</span>
</div>
<div class="tile" col="4" row="0" height="2" width="2">
<span resize="bottom-left">└</span>
</div>
<div class="tile" col="2" row="2" height="2" width="2">
<span resize="left">│</span>
<span resize="right">│</span>
<span resize="top">─</span>
<span resize="bottom">─</span>
<span resize="top-right">┐</span>
<span resize="top-left">┌</span>
<span resize="bottom-right">┘</span>
<span resize="bottom-left">└</span>
</div>
<div placeholder></div>
</the-grid>
First, make sure you have Bower and the Polymer CLI installed.
Then,
bower install
polymer serve -o
Add a <the-grid>
element to your page:
<the-grid></the-grid>
This will show an empty static grid with the default disposition layout with no move or resize capabilities.
You can add the draggable
or resizable
attribute (or both) to enable respectively tile's drag'n'drop or tile's resizing.
<the-grid draggable></the-grid>
This will show an empty grid with the default disposition layout and also the ability to move tiles by drag'n'drop.
Layout can be modified using the following attributes:
The number of columns
col-count
and number of rowsrow-count
are by default fixed, and represents the grid size. Nevertheless, you can allow the grid to auto increase its size with respectivelycol-autogrow
androw-autogrow
boolean attributes. This behavior occurs when a tile is resized or moved while being on the edge of the grid.
Also, you can allow tiles to overlap each other using overlappable
attribute:
<the-grid overlappable></the-grid>
Each direct child of <the-grid>
will be considered as a grid tile that can be moved or resized depending on the grid properties.
Grid's children can be of any types: <div>
, <p>
, <span>
, <tile>
, ... or even your own custom element: <grid-tile>
.
<the-grid>
<div col="2" row="1" height="1" width="3" ></div>
<paper-card col="0" row="0" height="2" width="2" ></paper-card>
</the-grid>
Each child needs 4 attributes which define its position and size within the grid:
If you need some placeholder while dragging or resizing a tile for preview purpose,
simply add a child to <the-grid>
with the placeholder attribute.
<the-grid>
<div placeholder style="color: grey"></div>
</the-grid>
This will enable a grey placeholder in the grid only visible while dragging and resizing tiles.
If the grid has the resizable
attribute, tiles can be resized by grabbing elements called grippers or resizers.
Those elements can be of any types, they just need to have a resize
attribute so the grid can find them.
<the-grid>
<div col="2" row="0" height="1" width="1" >
<span resize="right">│</span>
</div>
</the-grid>
Here, a tile is added to the grid. It has a nested right gripper so it can be used to resize the tile by the right edge.
Resize grippers can take the following values:
Several grippers can be used for the same tile. They can be nested wherever in the tile element.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
MIT license