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
+-
+
- Pixel Mode (default): Direct pixel value manipulation +
- Percentage Mode: Automatic calculation relative to parent container +
- 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 ~/brief/dev-doc/build-hinc/index.md for git repository.
+ +