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
square-me - Vaadin Add-on Directory
Universal web component to create resizable grid layouts
[](https://www.npmjs.com/package/square-me)
# SquareMe - Universal Resizable Grid
`SquareMe` is a universal grid layout built with [Stencil](http://stenciljs.com). It can be embedded in projects using any framework or even plain HTML. Under the hood `SquareMe` leverages the [`SplitMe`](https://github.com/alesgenova/split-me) component.
See a [Live Demo](https://alesgenova.github.io/square-me/).
[](https://alesgenova.github.io/square-me/)
## Installing
### Option 1 (HTML)
Add the `SquareMe` script tag to your `index.html`:
```
```
### Option 2 (React / Angular / Vue)
Add `SquareMe` to your project:
```
npm install --save square-me
```
Import `SquareMe` in your `index.js`:
```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:
```html
```
## Advanced Usage
`SquareMe` uses [`SplitMe`](https://github.com/alesgenova/split-me) 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
```html
```
### 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 |