DashboardResizeHandle

GitHub
Een handvat om het formaat van een zijbalk of paneel te wijzigen.

Gebruik

De DashboardResizeHandle component wordt gebruikt door de DashboardSidebar en DashboardPanel componenten.

Het wordt automatisch weergegeven wanneer de resizable prop is ingesteld, je hoeft het niet handmatig toe te voegen.

Voorbeelden

Binnen resize-handle slot

Hoewel dit onderdeel automatisch wordt weergegeven wanneer de resizable prop is ingesteld, kunt u de resize-handle-sleuf van de DashboardSidebar en DashboardPanel componenten gebruiken om het handvat aan te passen.

<template>
  <UDashboardGroup>
    <UDashboardSidebar resizable>
      <template #resize-handle="{ onMouseDown, onTouchStart, onDoubleClick }">
        <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"
          @dblclick="onDoubleClick"
        />
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>
In dit voorbeeld voegen we een after pseudo-element toe om een verticale lijn bij zweven weer te geven.

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

ui
{ base?: any; }

Slots

Slot Type
default
{}

Thema

app.config.ts
export default defineAppConfig({
  ui: {
    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 before:z-1'
    }
  }
})
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({
      ui: {
        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 before:z-1'
        }
      }
    })
  ]
})

Wijzigingsgelog

No recent changes

DashboardPanel

A resizable panel to display in a dashboard.

DashboardSearch

A ready-to-use CommandPalette to add to your dashboard.