SquareMe - Universal Resizable Grid
SquareMe
is a universal grid layout built with Stencil. It can be embedded in projects using any framework or even plain HTML. Under the hood SquareMe
leverages the SplitMe
component.
See a Live Demo.
Installing
Option 1 (HTML)
Add the SquareMe
script tag to your index.html
:
<script src="https://unpkg.com/square-me/dist/square-me.js"></script>
Option 2 (React / Angular / Vue)
Add SquareMe
to your project:
npm install --save square-me
Import SquareMe
in your index.js
:
; ;
Basic Usage
Use the square-me
tag anywhere you like. Set the number of rows and columns in the layout through the m
and n
attributes respectively. Set where the inner elements should be placed through the slot
attribute:
Advanced Usage
SquareMe
uses SplitMe
under the hood. Any property/attribute passed to SquareMe
will be forwarded to the underlying SplitMe
components.
Simply append a -h
or -v
to the attribute name you would use in SplitMe
and the property will be applied to the horizontal or vertical splitters respectively
Properties
Property | Attribute | Description | Type |
---|---|---|---|
fixedH |
fixed-h |
Prevent columns from being resized | boolean |
fixedV |
fixed-v |
Prevent rows from being resized | boolean |
m |
m |
The number of rows in the grid. | number |
maxSizesH |
max-sizes-h |
The columns maximum sizes | number[] | string |
maxSizesV |
max-sizes-v |
The rows maximum sizes | number[] | string |
minSizesH |
min-sizes-h |
The columns minimum sizes | number[] | string |
minSizesV |
min-sizes-v |
The rows minimum sizes | number[] | string |
n |
n |
The number of columns in the grid. | number |
sizesH |
sizes-h |
The initial column sizes. Acceptable formats are: "0.33, 0.67" or "50%, 25%, 25%" |
number[] | string |
sizesV |
sizes-v |
The initial row sizes. Acceptable formats are: "0.33, 0.67" or "50%, 25%, 25%" |
number[] | string |
throttleH |
throttle-h |
The minimum time (in ms) between column resize events while dragging. | number |
throttleV |
throttle-v |
The minimum time (in ms) between row resize events while dragging. | number |
Events
Event | Detail | Description |
---|---|---|
slotResizedH |
IResizeEvent | Emitted every time dragging causes the columns to resize |
slotResizedV |
IResizeEvent | Emitted every time dragging causes the rows to resize |