Usage
The DashboardResizeHandle component is used by the DashboardSidebar and DashboardPanel components.
It is automatically displayed when the resizable prop is set, you don't have to add it manually.
Examples
Within resize-handle slot
Even though this component is automatically displayed when the resizable prop is set, you can use the resize-handle slot of the DashboardSidebar and DashboardPanel components to customize the handle.
<template>
<B24DashboardGroup>
<B24DashboardSidebar resizable>
<template #resize-handle="{ onMouseDown, onTouchStart, onDoubleClick }">
<B24DashboardResizeHandle
class="after:absolute after:inset-y-0 after:right-0 after:w-px hover:after:bg-(--ui-color-accent-soft-element-blue) after:transition"
@mousedown="onMouseDown"
@touchstart="onTouchStart"
@dblclick="onDoubleClick"
/>
</template>
</B24DashboardSidebar>
<slot />
</B24DashboardGroup>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<B24DashboardPanel resizable>
<template #resize-handle="{ onMouseDown, onTouchStart, onDoubleClick }">
<B24DashboardResizeHandle
class="after:absolute after:inset-y-0 after:right-0 after:w-px hover:after:bg-(--ui-color-accent-soft-element-blue) after:transition"
@mousedown="onMouseDown"
@touchstart="onTouchStart"
@dblclick="onDoubleClick"
/>
</template>
</B24DashboardPanel>
</template>
In this example, we add an
after pseudo-element to display a vertical line on hover.API
Props
Slots
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/dashboard-resize-handle.ts
export default {
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'
}