Svelte-grid — Usage

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