DashboardResizeHandle 대시보드ResizeHandle
사이드바 또는 패널의 크기를 조정하는 핸들입니다.
Usage
DashboardResizeHandle 구성 요소는 DashboardSidebar 및 DashboardPanel 구성 요소에 사용됩니다.
resizable prop이 설정되면 자동으로 표시되며, manualy를 추가 할 필요가 없습니다.
examples 예
xresize-handle 슬롯 내
resizable 소품을 설정하면 이 구성 요소가 자동으로 표시되지만 DashboardSidebar 및 DashboardPanel 구성 요소의 resize-handle 슬롯을 사용하여 핸들을 사용자 정의할 수 있습니다.
<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>
이 예제에서는
after 유사 요소를 추가하여 마우스를 가리키는 수직 선을 표시합니다.API 사용
Props (### Props)
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { base?: any; } |
슬롯
| Slot | Type |
|---|---|
default | {} |
Theme 주제
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'
}
}
})
]
})변경 로그
No recent changes