DashboardResizeHandlePRO
一个用于调整侧边栏或面板大小的句柄。
用法
DashboardResizeHandle 组件由 DashboardSidebar 和 DashboardPanel 组件使用。
当设置 resizable
属性时,它会自动显示,**您无需手动添加**。
示例
resize-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
属性
属性 | 默认值 | 类型 |
---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
插槽
插槽 | 类型 |
---|---|
默认 |
|
主题
app.config.ts
export default defineAppConfig({
uiPro: {
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 '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
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 uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
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'
}
}
})
]
})