DashboardResizeHandle

GitHub
A handle to resize a sidebar or panel.

Usage

The DashboardResizeHandle component is used by the DashboardSidebar and DashboardPanel 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 and DashboardPanel components to customize the handle.

<template>
  <UDashboardGroup>
    <UDashboardSidebar resizable>
      <template #resize-handle="{ onMouseDown, onTouchStart }">
        <UDashboardResizeHandle
          class="after:absolute after:inset-y-0 after:right-0 after:w-px hover:after:bg-(--ui-border-accented) after:transition"
          @mousedown="onMouseDown"
          @touchstart="onTouchStart"
        />
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>
In this example, we add an after pseudo-element to display a vertical line on hover.

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

Slots

Slot Type
default

{}

Theme

app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardResizeHandle: {
      base: 'hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        dashboardResizeHandle: {
          base: 'hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5'
        }
      }
    })
  ]
})

DashboardPanel

A resizable panel to display in a dashboard.

DashboardSearch

A ready to use CommandPalette to add to your dashboard.