Usage

Use Grid like any other component.

The basic example

<script>
import Grid from "svelte-grid";
import gridHelp from "svelte-grid/build/helper/index.mjs";

const id = () => "_" + Math.random().toString(36).substr(2, 9);

let items = [
  {
    6: gridHelp.item({
      x: 0,
      y: 0,
      w: 2,
      h: 2,
    }),
    id: id(),
  },

  {
    6: gridHelp.item({
      x: 2,
      y: 0,
      w: 2,
      h: 2,
    }),
    id: id(),
  },
]

const breakpoint = 1200
const column = 6

const cols = [[breakpoint, column]]
</script>

<Grid {cols} bind:items={items} let:item={item}>
  <div>{item.id}</div>
</Grid>

See more examples

How to style

Right now this is a problem for svelte

But you can apply styles to a selector globally, use the, :global(...) modifier, for example

<style>
  :global(.svlt-grid-shadow) {
    /* Back shadow */
    background: pink;
  }
  :global(.svlt-grid-container) {
    /* Container color */
    background: #eee;
  }
  :global(.svlt-grid-resizer::after) {
    /* Resizer color */
    border-color: white !important;
  }
</style>

Here are the class names

  • .svlt-grid-container Class name for container grid
  • .svlt-grid-item Slot shell class name
  • .svlt-grid-shadow Class name for the back shadow when resizing or moving an element
  • .svlt-grid-resizer Class name for resizer

Helper functions

The helper function is located in svelte-grid/build/helper/index.mjs

import gridHelp from 'svelte-grid/build/helper'

What’s in there?

Well, there are several functions that will help you manage the grid elements

gridHelp.item(item: Object)

Returns an object with the properties necessary to create a widget. This is an object for a single widget

{
  x: Number,
  y: Number,
  w: Number,
  h: Number,
  fixed: Boolean,
  resizable: Boolean,
  draggable: Boolean,
  min: {
    w: Number,
    h: Number,
  },
  max: {
    w: Number,
    h: Number,
  },
  customDragger: Boolean,
  customResizer: Boolean,
}

Example of use

<script>
const items = [
  {
    6: gridHelp.item({
      x: 0,
      y: 0,
      w: 2,
      h: 2,
      draggable: false,
      max: { w: 2 },
    }),
    data: {/*YOUR DATE GOES HERE*/}
  },
];

const cols = [[1200, 6]];
</script>
<Grid gap={[10, 5]} {items} {cols} rowHeight={150} let:item let:dataItem>
  <div>{item.data}</div>
</Grid>

dataItem - Returns your item, you can use it to access your data item - Returns the item for the current breakpoint

Responsiveness

See this demo

You can specify an item for the right column

<Grid {items} {cols} rowHeight={150} />

<script>
let items = [
  {
    5: gridHelp.item({ x: 0, y: 0, w: 2, h: 2 }),
    2: gridHelp.item({ x: 0, y: 0, w: 1, h: 2 }),
  },
  {/*..*/}
];

const cols = [
  [1600, 5],
  [1024, 2],
];
</script>
gridHelp.findSpace(item: Object, items: Array<Object>, cols: Number)

Find out where to place the widget in the grid by calculating from left to right returns an object of two properties x and y.

How to disable opacity animation ?

:global(.svlt-grid-active) {
  opacity: 1!important;
}

Props

Prop Type Description Required
items Array<Object> items is an array of objects, see the demos for more complete usage Yes
cols Array<Array<Number>> Specify columns, e.g. [[1400, 300]] Yes
gap Array<Number> Margin between items in px No
rowHeight Number Rows have a static height No
throttleUpdate Number Throttle grid recalculation, default value is 100 No
throttleResize Number Throttle grid recalculation, when the container changes its width. default value is 100 No
on:resize Function<void> The event is triggered when the grid is resized. There are a couple of properties in the detail property. No
on:change Function<void> The event is triggered when an element is resized or moved No
on:mount Function<void> The event is triggered when the grid is mounted. There are a couple of properties in the detail property.
on:pointerup Function<void> The event is fired when a pointer is no longer active No
fastStart Boolean Removes transition onload No
fillSpace Boolean Each grid element (except active element) finds its own position.
sensor Number Set the distance from the cursor to the edge No
scroller Element Element reference for setting Element.scrollTop. The default is document.documentElement No

Have questions ?

Open an issue