square-me
Universal web component to create resizable grid layouts
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
:
import { defineCustomElements as defineSquareMe } from 'square-me/dist/loader';
defineSquareMe(window);
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:
<square-me m="2" n="2">
<div slot="0 0" class="fill red"></div>
<div slot="0 1" class="fill green"></div>
<div slot="1 0" class="fill green"></div>
<div slot="1 1" class="fill red"></div>
</square-me>
<style>
.fill {
height: 100%;
width: 100%;
}
</style>
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
<square-me m="2" n="2" sizes-h="0.75, 0.25" sized-v="0.25, 0.75">
<div slot="0 0" class="fill red"></div>
<div slot="0 1" class="fill green"></div>
<div slot="1 0" class="fill green"></div>
<div slot="1 1" class="fill red"></div>
</square-me>
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[] |
maxSizesV |
max-sizes-v |
The rows maximum sizes | `number[] |
minSizesH |
min-sizes-h |
The columns minimum sizes | `number[] |
minSizesV |
min-sizes-v |
The rows minimum sizes | `number[] |
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[] |
sizesV |
sizes-v |
The initial row sizes. Acceptable formats are: "0.33, 0.67" or "50%, 25%, 25%" |
`number[] |
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 |
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- split-me#^1.1.4
- Released
- 2018-10-20
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent