Custom Resize Handles

resizeConfig.handles and LayoutItem.resizeHandles remain the source of truth for enabled directions. The resize-handle slot replaces only the visual content of each enabled handle while Grid Layout Plus keeps ownership of positioning, pointer hit areas, cursors, and resize behavior.

The slot exposes the configured axis and the physical direction after RTL or mirrored rendering. Use direction when a custom icon must point toward the side where the handle is displayed.

Try it: Resize Item 0 from any arrow. Items 1 and 2 demonstrate per-item direction overrides with the same custom renderer.

Live demo

Vue SFC

<script setup lang="ts">
import { ref } from 'vue'

import { GridLayout } from 'grid-layout-plus'

import type { Layout, ResizeConfig, ResizeHandleAxis } from 'grid-layout-plus'

const resizeConfig: ResizeConfig = {
  handles: ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'],
}
const glyphs: Record<ResizeHandleAxis, string> = {
  n: '↑',
  ne: '↗',
  e: '→',
  se: '↘',
  s: '↓',
  sw: '↙',
  w: '←',
  nw: '↖',
}
const layout = ref<Layout>([
  { x: 0, y: 0, w: 6, h: 3, i: 'all' },
  { x: 6, y: 0, w: 6, h: 3, i: 'limited', resizeHandles: ['e', 's', 'se'] },
])
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :is-draggable="false"
    :resize-config="resizeConfig"
    :row-height="30"
  >
    <template #item="{ item }">
      {{ item.i }}
    </template>
    <template #resize-handle="{ axis, direction }">
      <span class="custom-handle" :data-axis="axis">{{ glyphs[direction] }}</span>
    </template>
  </GridLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type {
  InteractionStartPayload,
  InteractionTerminalPayload,
  Layout,
  ResizeConfig,
  ResizeHandleAxis,
} from 'grid-layout-plus'

const resizeConfig: ResizeConfig = {
  handles: ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'],
}

const directionGlyph: Record<ResizeHandleAxis, string> = {
  n: '↑',
  ne: '↗',
  e: '→',
  se: '↘',
  s: '↓',
  sw: '↙',
  w: '←',
  nw: '↖',
}

function createLayout(): Layout {
  return [
    { x: 0, y: 0, w: 6, h: 4, i: '0' },
    { x: 6, y: 0, w: 6, h: 4, i: '1', resizeHandles: ['e', 's', 'se'] },
    { x: 0, y: 4, w: 12, h: 3, i: '2', resizeHandles: ['n', 'w', 'nw'] },
  ]
}

const layout = ref(createLayout())
const lastAction = ref('Waiting · resize from a custom arrow handle')

function handleInteractionStart(payload: InteractionStartPayload) {
  if (payload.type === 'resize') lastAction.value = `Resizing item ${payload.id}`
}

function handleInteractionEnd(payload: InteractionTerminalPayload) {
  if (payload.type === 'resize') lastAction.value = `Resized item ${payload.id}`
}

function itemLabel(id: string) {
  if (id === '0') return 'Item 0 · all 8 custom handles'
  if (id === '1') return 'Item 1 · E / S / SE'
  return 'Item 2 · N / W / NW'
}

function resetDemo() {
  layout.value = createLayout()
  lastAction.value = 'Reset · resize from a custom arrow handle'
}
</script>

<template>
  <section class="demo-root demo-shell">
    <div class="demo-toolbar">
      <Tag class="demo-state demo-state--accent" type="primary" simple circle>
        {{ lastAction }}
      </Tag>
      <Button button-type="button" @click="resetDemo"> Reset layout </Button>
    </div>
    <GridLayout
      v-model:layout="layout"
      class="demo-grid"
      :is-draggable="false"
      :resize-config="resizeConfig"
      :row-height="40"
      @interaction-end="handleInteractionEnd"
      @interaction-start="handleInteractionStart"
    >
      <template #item="{ item }">
        <span class="demo-item__label" :data-custom-resize-item="item.i">
          {{ itemLabel(String(item.i)) }}
        </span>
      </template>
      <template #resize-handle="{ item, axis, direction }">
        <span
          class="demo-custom-resize-handle"
          data-testid="custom-resize-handle"
          :data-resize-axis="axis"
          :data-resize-direction="direction"
          :data-resize-item="item.i"
        >
          {{ directionGlyph[direction] }}
        </span>
      </template>
    </GridLayout>
  </section>
</template>