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