@wry-smile/gridster v1.0.0

vue3-gridster

vue3 implementation of angular-gridster2

How to install

npm install @wry-smile/gridster

How to use

Setup

import type { GridsterItemType, GridsterPropsType } from '@wry-smile/gridster'
import { Gridster, GridsterItem } from '@wry-smile/gridster'
import { reactive, ref } from 'vue'
import '@wry-smile/gridster/style'

const options = reactive<GridsterPropsType>({
  gridType: 'fit',
  displayGrid: 'always',
})

const items = ref<GridsterItemType[]>([
  { cols: 2, rows: 1, y: 0, x: 0 },
  { cols: 2, rows: 2, y: 0, x: 2 },
  { cols: 1, rows: 1, y: 0, x: 4 },
  { cols: 3, rows: 2, y: 1, x: 4 },
  { cols: 1, rows: 1, y: 4, x: 5 },
  { cols: 1, rows: 1, y: 2, x: 1 },
  { cols: 2, rows: 2, y: 5, x: 5 },
  { cols: 2, rows: 2, y: 3, x: 2 },
  { cols: 2, rows: 1, y: 2, x: 2 },
  { cols: 1, rows: 1, y: 3, x: 4 },
  { cols: 1, rows: 1, y: 0, x: 6 },
])

Template

<Gridster :options="options">
  <template v-for="(_item, index) in items" :key="index">
    <GridsterItem v-model:item="items[index]" />
  </template>
</Gridster>