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[] | 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 |