Two Way Binding

Use bind: on item props to keep your state in sync with the grid. Move or resize items to see the values update.

Current State

A: x=0, y=0, w=2, h=2

B: x=2, y=0, w=3, h=2

C: x=0, y=2, w=2, h=3

Code

svelte

<script lang="ts">
  import Grid, { GridItem } from '@appulsauce/svelte-grid';

  let items = $state([
    { x: 0, y: 0, w: 2, h: 2, label: 'A' },
    { x: 2, y: 0, w: 3, h: 2, label: 'B' }
  ]);
</script>

<Grid cols={8}>
  {#each items as item (item.label)}
    <GridItem
      bind:x={item.x}
      bind:y={item.y}
      bind:w={item.w}
      bind:h={item.h}
    >
      {#snippet children()}{item.label}{/snippet}
    </GridItem>
  {/each}
</Grid>