Nuxt UI Pro v1.0 is out with dashboard components! Discount ends 16 hours ago.

DashboardPanelHandle

A handle used in a resizable DashboardPanel.

Usage

This component is used internally in the #handle slot of the DashboardPanel component when the resizable prop is set. You might want to use it to change its style or behavior.

pages/inbox.vue
<template>
  <UDashboardPage>
    <UDashboardPanel resizable>
      <template #handle>
        <UDashboardPanelHandle :ui="{ container: 'group-hover:bg-primary-500 dark:group-hover:bg-primary-400' }" />
      </template>
    </UDashboardPanel>
  </UDashboardPage>
</template>

Props

ui
any
{}
orientation
"vertical" | "horizontal"
"vertical"

Config

{
  wrapper: 'hidden md:block bg-transparent select-none absolute z-50 group w-[9px] h-full inset-y-0 -right-[5px] cursor-col-resize',
  container: 'group-hover:bg-gray-300 dark:group-hover:bg-gray-700 transition duration-200 absolute w-px h-full inset-x-0 mx-auto'
}