---
title: "DashboardResizeHandle"
description: "A handle to resize a sidebar or panel."
canonical_url: "https://vinicunca.dev/pohon/components/dashboard-resize-handle"
---
# DashboardResizeHandle

> A handle to resize a sidebar or panel.

## Usage

The DashboardResizeHandle component is used by the [DashboardSidebar](https://vinicunca.dev/pohon/components/dashboard-sidebar) and [DashboardPanel](https://vinicunca.dev/pohon/components/dashboard-panel) components.

It is automatically displayed when the `resizable` prop is set, **you don't have to add it manually**.

## Examples

### Within `resize-handle` slot

Even though this component is automatically displayed when the `resizable` prop is set, you can use the `resize-handle` slot of the [DashboardSidebar](https://vinicunca.dev/pohon/components/dashboard-sidebar) and [DashboardPanel](https://vinicunca.dev/pohon/components/dashboard-panel) components to customize the handle.

```vue [layouts/dashboard.vue]
<template>
  <PDashboardGroup>
    <PDashboardSidebar resizable>
      <template #resize-handle="{ onMouseDown, onTouchStart, onDoubleClick }">
        <PDashboardResizeHandle
          class="hover:after:bg---ui-color-border-accented after:w-px after:transition after:inset-y-0 after:right-0 after:absolute"
          @mousedown="onMouseDown"
          @touchstart="onTouchStart"
          @dblclick="onDoubleClick"
        />
      </template>
    </PDashboardSidebar>

    <slot />
  </PDashboardGroup>
</template>
```

```vue [pages/index.vue]
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
});
</script>

<template>
  <PDashboardPanel resizable>
    <template #resize-handle="{ onMouseDown, onTouchStart, onDoubleClick }">
      <PDashboardResizeHandle
        class="hover:after:bg---ui-color-border-accented after:w-px after:transition after:inset-y-0 after:right-0 after:absolute"
        @mousedown="onMouseDown"
        @touchstart="onTouchStart"
        @dblclick="onDoubleClick"
      />
    </template>
  </PDashboardPanel>
</template>
```

> [!NOTE]
> 
> In this example, we add an `after` pseudo-element to display a vertical line on hover.

## API

### Props

```ts
/**
 * Props for the DashboardResizeHandle component
 */
interface DashboardResizeHandleProps {
  /**
   * The element or component this component should render as.
   * @default 'div'
   */
  as?: any;
  ui?: { base?: any; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the DashboardResizeHandle component
 */
interface DashboardResizeHandleSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    dashboardResizeHandle: {
      base: 'hidden cursor-ew-resize select-none relative touch-none lg:block before:content-empty before:inset-y-0 before:absolute before:z-1 before:-left-1.5 before:-right-1.5'
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/vinicunca/pohon/commits/main/src/runtime/components/DashboardResizeHandle.vue) and [theme](https://github.com/vinicunca/pohon/commits/main/src/theme/dashboard-resize-handle.ts).

---

- [GitHub](https://github.com/vinicunca/pohon/blob/main/src/runtime/components/DashboardResizeHandle.vue)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.