DashboardDéveloppement
Une poignée pour redimensionner une barre latérale ou un panel.
Utilisation
Le composant DashboardResizeHandle est utilisé par les composants DashboardSidebar et DashboardPanel.
Il s'affiche automatiquement lorsque le prop resizable est défini, **vous n'avez pas à l'ajouter manuellement **.
exemples
Dans le slot resize-handle
Même si ce composant s'affiche automatiquement lorsque l'accessoire resizable est défini, vous pouvez utiliser l'emplacement resize-handle des composants DashboardSidebar et [DashboardPanelxph0222xxph023) pour personnaliser la poignée.
<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>
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<UDashboardPanel 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>
</UDashboardPanel>
</template>
Dans cet exemple, nous ajoutons un pseudo-élément
after pour afficher une ligne verticale en survol.api
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { base?: any; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Thème
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'
}
}
})
]
})Changelog
No recent changes