Resizable Bar Component

A Vue component that provides draggable dividers for resizing adjacent panels in web applications.

Overview

The ResizableBar component creates a draggable bar that allows users to resize panels by clicking and dragging. It supports both horizontal and vertical orientations.

Key Features

• Directional Support: Works in both horizontal (for width adjustment) and vertical (for height adjustment) orientations
• Unit Flexibility: Supports pixel, percentage, and custom unit systems through converters
• Visual Feedback: Changes appearance on hover and during drag operations
• Constraint System: Enforces minimum and maximum size limits

Usage Pattern

The component should be placed between two panels that need to be resizable. The resize events provide size information that parent components use to adjust panel dimensions.

Unit Modes

1. Pixel Mode (default): Direct pixel value manipulation
2. Percentage Mode: Automatic calculation relative to parent container
3. Custom Mode: User-defined unit converters for specialized requirements

Integration Example

See the player-panel.js implementation for a practical example of using ResizableBar to create adjustable layouts between rendering canvas and side panels.

Web Application Source Code Path

• common/resizable-bar
• common/resizable-bar-example
• player/player-panel

See this page ~/dev-doc/build-hinc/index.md for git repository.