square-me

Universal web component to create resizable grid layouts

Usage no npm install needed!

<script type="module">
  import squareMe from 'https://cdn.skypack.dev/square-me';
</script>

README

npm package Built With Stencil

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.

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