仪表盘面板手柄
一个用于可调整大小的 DashboardPanel 的手柄。
用法
此组件在 #handle 的 DashboardPanel 组件的插槽中使用，当 resizable 属性设置为 true 时。您可能需要使用它来更改其样式或行为。
pages/inbox.vue
<template>
<UDashboardPage>
<UDashboardPanel resizable>
<template #handle="{ onDrag }">
<UDashboardPanelHandle :ui="{ container: 'group-hover:bg-primary-500 dark:group-hover:bg-primary-400' }" @mousedown="onDrag" />
</template>
</UDashboardPanel>
</UDashboardPage>
</template>
属性
ui
任意
{}方向
"vertical" | "horizontal"
"vertical"配置
{
wrapper: 'hidden md:block bg-transparent select-none absolute z-50 group w-[9px] h-full inset-y-0 -right-[5px] cursor-col-resize',
container: 'group-hover:bg-gray-300 dark:group-hover:bg-gray-700 transition duration-200 absolute w-px h-full inset-x-0 mx-auto'
}