ankow
OverviewBreadCrumbButtonButtonGroupClipboardDialogDirectoryViewFileUploaderFormTextInputPasswordInputEmailInputNumberInputDateTimeInputTagInputCheckBoxRadioButtonSwitchFormGroupInputGroupIconLayoutMainLayoutTopBarBottomBarListItemMenuMultiSelectNotificationOfflineBannerPopoverProgressBarSaveIndicatorSectionItemSettingsItemSingleSelectSplitLayoutSpinnerTabViewTableViewTooltipTextOverflowTreeViewSplitLayout
A horizontal split layout with a draggable divider. Both panels take full height with overflow hidden. The divider drag works reliably even when panels contain iframes.
Basic Demo
Drag the divider between the panels. Current left width: 50%
Left Panel
This panel takes 50% of the width. The overflow is hidden on the panel itself, so child content should handle its own scrolling.
Try dragging the divider to resize.
Right Panel
This panel takes the remaining width. It has overflow: hidden by default.
Put scrollable content inside to enable scrolling within each panel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
With Minimum Width Constraints
Set min-left-width and min-right-width to prevent panels from becoming too narrow.
Min 25%
This panel cannot go below 25% width.
Min 30%
This panel cannot go below 30% width.
Vertical Orientation
Set orientation="vertical" to split top-to-bottom. Use v-model:top-height for the top panel height. Current top height: 50%
Top Panel
This panel takes 50% of the height.
Bottom Panel
This panel takes the remaining height.
Opaque Divider
Set opaque to give the divider a visible background instead of the transparent default.
Left Panel
Opaque divider gives a solid background to the drag handle area.
Right Panel
Usage
Iframe Compatibility
When the divider is being dragged, both panels get pointer-events: none applied, preventing embedded iframes from capturing mouse events and breaking the drag.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | String | 'horizontal' | Layout direction: 'horizontal' or 'vertical' |
| leftWidth (v-model) | Number | 50 | Left panel width in percentage (horizontal mode) |
| minLeftWidth | Number | 20 | Minimum left panel width in percentage |
| minRightWidth | Number | 20 | Minimum right panel width in percentage |
| topHeight (v-model) | Number | 50 | Top panel height in percentage (vertical mode) |
| minTopHeight | Number | 20 | Minimum top panel height in percentage |
| minBottomHeight | Number | 20 | Minimum bottom panel height in percentage |
| opaque | Boolean | false | Whether the divider has an opaque background |
Events
| Event | Payload | Description |
|---|---|---|
| update:leftWidth | Number | Emitted when dragging ends with the final left width percentage (horizontal mode) |
| update:topHeight | Number | Emitted when dragging ends with the final top height percentage (vertical mode) |
Slots
| Slot | Description |
|---|---|
| left | Content for the left panel |
| right | Content for the right panel (fills remaining space) |