237 lines
9.8 KiB
Markdown
237 lines
9.8 KiB
Markdown
1. Home
|
|
2. Components
|
|
3. Sync Scroll
|
|
|
|
# Synchronized Scrolling Components
|
|
|
|
Components for creating synchronized scrolling experiences with master-slave relationships and drag-to-scroll functionality.
|
|
|
|
## Basic Usage with Components
|
|
|
|
Master Scroll Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20 Item 21 Item 22 Item 23 Item 24 Item 25 Item 26 Item 27 Item 28 Item 29 Item 30 Item 31 Item 32 Item 33 Item 34 Item 35 Item 36 Item 37 Item 38 Item 39 Item 40 Item 41 Item 42 Item 43 Item 44 Item 45 Item 46 Item 47 Item 48 Item 49 Item 50 Slave Scroll Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20 Item 21 Item 22 Item 23 Item 24 Item 25 Item 26 Item 27 Item 28 Item 29 Item 30 Item 31 Item 32 Item 33 Item 34 Item 35 Item 36 Item 37 Item 38 Item 39 Item 40 Item 41 Item 42 Item 43 Item 44 Item 45 Item 46 Item 47 Item 48 Item 49 Item 50 ```jsx
|
|
import {SyncScrollProvider, SyncScroll, SyncScrollSlave} from "@vuer-ai/vuer-uikit";
|
|
|
|
function App() {
|
|
return (
|
|
<SyncScrollProvider>
|
|
<SyncScroll className="overflow-y-auto h-96">
|
|
{/* Master scrollable content */}
|
|
</SyncScroll>
|
|
|
|
<SyncScrollSlave className="overflow-y-auto h-96">
|
|
{/* Slave synchronized scroll area */}
|
|
</SyncScrollSlave>
|
|
</SyncScrollProvider>
|
|
);
|
|
}
|
|
```
|
|
|
|
## With Drag Control
|
|
|
|
The drag components now include built-in drag-to-scroll functionality. Click and drag to scroll!
|
|
|
|
SyncScroll Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20 Item 21 Item 22 Item 23 Item 24 Item 25 Item 26 Item 27 Item 28 Item 29 Item 30 Item 31 Item 32 Item 33 Item 34 Item 35 Item 36 Item 37 Item 38 Item 39 Item 40 Item 41 Item 42 Item 43 Item 44 Item 45 Item 46 Item 47 Item 48 Item 49 Item 50 SyncDrag 🖱️ Click and drag vertically to scroll all panels Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20 Item 21 Item 22 Item 23 Item 24 Item 25 Item 26 Item 27 Item 28 Item 29 Item 30 Item 31 Item 32 Item 33 Item 34 Item 35 Item 36 Item 37 Item 38 Item 39 Item 40 Item 41 Item 42 Item 43 Item 44 Item 45 Item 46 Item 47 Item 48 Item 49 Item 50 SyncScrollSlave Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20 Item 21 Item 22 Item 23 Item 24 Item 25 Item 26 Item 27 Item 28 Item 29 Item 30 Item 31 Item 32 Item 33 Item 34 Item 35 Item 36 Item 37 Item 38 Item 39 Item 40 Item 41 Item 42 Item 43 Item 44 Item 45 Item 46 Item 47 Item 48 Item 49 Item 50 ```jsx
|
|
import {SyncScrollProvider, SyncScroll, SyncDrag, SyncScrollSlave} from "@vuer-ai/vuer-uikit";
|
|
|
|
function App() {
|
|
return (
|
|
<SyncScrollProvider>
|
|
<SyncScroll className="overflow-y-auto h-96">
|
|
{/* Master scrollable content */}
|
|
</SyncScroll>
|
|
|
|
<SyncDrag className="overflow-y-auto h-96">
|
|
{/* Draggable content with vertical drag-to-scroll */}
|
|
</SyncDrag>
|
|
|
|
<SyncScrollSlave className="overflow-y-auto h-96">
|
|
{/* Slave synchronized area */}
|
|
</SyncScrollSlave>
|
|
</SyncScrollProvider>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Horizontal Drag Variants
|
|
|
|
Horizontal drag components allow left/right scrolling via drag gestures:
|
|
|
|
### Horizontal Draggable Panels - Both Can Be Dragged
|
|
|
|
Drag either panel to control both - Master (left) overrides Slave (right)
|
|
|
|
MASTER DRAG (SyncDragX) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 SLAVE DRAG (SyncDragSlaveX) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ```jsx
|
|
import {SyncScrollProvider, SyncDragX, SyncDragSlaveX} from "@vuer-ai/vuer-uikit";
|
|
|
|
function App() {
|
|
return (
|
|
<SyncScrollProvider>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{/* Master drag - controls all */}
|
|
<SyncDragX className="border-2 border-blue-400 rounded h-32 overflow-x-auto bg-blue-50">
|
|
<div className="flex gap-4 p-4" style={{width: '1200px'}}>
|
|
{/* Horizontal content */}
|
|
</div>
|
|
</SyncDragX>
|
|
|
|
{/* Slave drag - follows master but can be dragged */}
|
|
<SyncDragSlaveX className="border-2 border-green-400 rounded h-32 bg-green-50">
|
|
<div className="flex gap-4 p-4" style={{width: '1200px'}}>
|
|
{/* Horizontal content */}
|
|
</div>
|
|
</SyncDragSlaveX>
|
|
</div>
|
|
</SyncScrollProvider>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Omnidirectional Drag Variants
|
|
|
|
Omnidirectional drag components allow scrolling in any direction via drag gestures:
|
|
|
|
### Omnidirectional Draggable Panels - Both Can Be Dragged
|
|
|
|
Drag either panel in any direction - Master (left) overrides Slave (right)
|
|
|
|
MASTER DRAG (SyncDrag) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 SLAVE DRAG (SyncDragSlave) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ```jsx
|
|
import {SyncScrollProvider, SyncDrag, SyncDragSlave} from "@vuer-ai/vuer-uikit";
|
|
|
|
function App() {
|
|
return (
|
|
<SyncScrollProvider>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{/* Master drag - controls all */}
|
|
<SyncDrag className="border-2 border-purple-400 rounded h-64 overflow-auto bg-purple-50">
|
|
<div style={{width: '800px', height: '600px'}} className="p-8">
|
|
{/* Content that scrolls in both directions */}
|
|
</div>
|
|
</SyncDrag>
|
|
|
|
{/* Slave drag - follows master but can be dragged */}
|
|
<SyncDragSlave className="border-2 border-orange-400 rounded h-64 bg-orange-50">
|
|
<div style={{width: '800px', height: '600px'}} className="p-8">
|
|
{/* Content that scrolls in both directions */}
|
|
</div>
|
|
</SyncDragSlave>
|
|
</div>
|
|
</SyncScrollProvider>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Using Hooks Directly
|
|
|
|
For more control, you can use the hooks directly:
|
|
|
|
useSyncScroll Hook Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20 Item 21 Item 22 Item 23 Item 24 Item 25 Item 26 Item 27 Item 28 Item 29 Item 30 Item 31 Item 32 Item 33 Item 34 Item 35 Item 36 Item 37 Item 38 Item 39 Item 40 Item 41 Item 42 Item 43 Item 44 Item 45 Item 46 Item 47 Item 48 Item 49 Item 50 useScrollSlave Hook Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20 Item 21 Item 22 Item 23 Item 24 Item 25 Item 26 Item 27 Item 28 Item 29 Item 30 Item 31 Item 32 Item 33 Item 34 Item 35 Item 36 Item 37 Item 38 Item 39 Item 40 Item 41 Item 42 Item 43 Item 44 Item 45 Item 46 Item 47 Item 48 Item 49 Item 50 useSyncDrag Hook Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20 Item 21 Item 22 Item 23 Item 24 Item 25 Item 26 Item 27 Item 28 Item 29 Item 30 Item 31 Item 32 Item 33 Item 34 Item 35 Item 36 Item 37 Item 38 Item 39 Item 40 Item 41 Item 42 Item 43 Item 44 Item 45 Item 46 Item 47 Item 48 Item 49 Item 50 ```jsx
|
|
import {SyncScrollProvider, useSyncScroll, useScrollSlave, useSyncDrag} from "@vuer-ai/vuer-uikit";
|
|
|
|
// Master panel - controls all other panels
|
|
function MasterPanel() {
|
|
const ref = useSyncScroll();
|
|
|
|
return (
|
|
<div ref={ref} className="overflow-y-auto h-96">
|
|
{/* Your scrollable content */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Slave panel - controlled by master, syncs with other slaves
|
|
function SlavePanel() {
|
|
const ref = useScrollSlave();
|
|
|
|
return (
|
|
<div ref={ref} className="overflow-y-auto h-96">
|
|
{/* Your scrollable content */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Drag panel - acts like master when dragged
|
|
function DragPanel() {
|
|
const ref = useSyncDrag();
|
|
|
|
return (
|
|
<div ref={ref} className="overflow-y-auto h-96">
|
|
{/* Your draggable content */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<SyncScrollProvider>
|
|
<MasterPanel/>
|
|
<SlavePanel/>
|
|
<DragPanel/>
|
|
</SyncScrollProvider>
|
|
);
|
|
}
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Components
|
|
|
|
#### <SyncScrollProvider>
|
|
|
|
Wraps components that need synchronized scrolling.
|
|
|
|
#### <SyncScroll>
|
|
|
|
A scrollable container that synchronizes with other scroll components. Acts as a master that controls all other synchronized elements.
|
|
|
|
Props: Extends HTMLAttributes<HTMLDivElement>
|
|
|
|
#### <SyncScrollSlave>
|
|
|
|
A scrollable container that is controlled by masters and syncs with other slaves.
|
|
|
|
Props: Extends HTMLAttributes<HTMLDivElement>
|
|
|
|
#### <SyncDrag>
|
|
|
|
A draggable container that supports both horizontal and vertical drag-to-scroll. Click and drag in any direction to scroll both horizontally and vertically. Controls synchronized scrolling.
|
|
|
|
Props: Extends HTMLAttributes<HTMLDivElement>
|
|
|
|
#### <SyncDragX>
|
|
|
|
A draggable container that only supports horizontal drag-to-scroll. Click and drag left/right to scroll horizontally only (vertical dragging is disabled). Controls synchronized scrolling.
|
|
|
|
Props: Extends HTMLAttributes<HTMLDivElement>
|
|
|
|
### Hooks
|
|
|
|
#### useSyncScroll()
|
|
|
|
Returns a ref for a master scroll element that controls all other elements.
|
|
|
|
#### useScrollSlave()
|
|
|
|
Returns a ref for a slave scroll element that is controlled by masters and syncs with other slaves.
|
|
|
|
#### useSyncDrag()
|
|
|
|
Returns a ref for drag-controlled scrolling that acts like a master in synchronized scrolling.
|
|
|
|
### Behavior Notes
|
|
|
|
- Master elements (SyncScroll, useSyncScroll): Control all other synchronized elements
|
|
- Slave elements (SyncScrollSlave, useScrollSlave): Are controlled by masters and sync with other slaves
|
|
- Drag elements (SyncDrag, SyncDragX, Drag, useSyncDrag): Act like masters with built-in drag-to-scroll functionality
|
|
- SyncDrag: Vertical drag-to-scroll
|
|
- SyncDragX: Horizontal drag-to-scroll
|
|
- Drag: Omnidirectional drag-to-scroll
|
|
|
|
📍 SyncScroll: Master scroll control - scrolling affects all synchronized elements
|
|
|
|
📍 SyncScrollSlave: Controlled by masters, syncs with other slaves
|
|
|
|
📍 SyncDrag: Vertical drag-to-scroll that controls all synchronized elements
|
|
|
|
📍 SyncDragX: Horizontal drag-to-scroll that controls all synchronized elements
|
|
|
|
📍 Drag: Omnidirectional drag-to-scroll that controls all synchronized elements |