DashboardResizeHandle

GitLab
Uma alça para redimensionar uma sidebar ou painel.

Uso

O componente DashboardResizeHandle é usado pelos componentes DashboardSidebar e DashboardPanel.

Ele é exibido automaticamente quando a prop resizable está definida, você não precisa adicioná-lo manualmente.

Exemplos

Dentro do slot resize-handle

Embora este componente seja exibido automaticamente quando a prop resizable está definida, você pode usar o slot resize-handle dos componentes DashboardSidebar e DashboardPanel para personalizar a alça.

<template>
  <NDashboardGroup>
    <NDashboardSidebar resizable>
      <template #resize-handle="{ onMouseDown, onTouchStart, onDoubleClick }">
        <NDashboardResizeHandle
          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>
    </NDashboardSidebar>

    <slot />
  </NDashboardGroup>
</template>
Neste exemplo, adicionamos um pseudo-elemento after para exibir uma linha vertical no hover.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

Slots

Slot Type
default{}

Tema

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'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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'
        }
      }
    })
  ]
})

Changelog

No recent changes

DashboardPanel

Um painel redimensionável para exibir em um dashboard.

DashboardSearch

Um CommandPalette pronto para adicionar ao seu dashboard.