Skip to content

Commit a655fdc

Browse files
feat: Added fDragHandle documentation
1 parent daec81b commit a655fdc

1 file changed

Lines changed: 41 additions & 0 deletions

File tree

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Drag Handle
2+
3+
**Selector:** [fDragHandle]
4+
5+
The **FDragHandle** is a directive that specifies the handle for dragging a node within a flow of elements. It is used in conjunction with the [fNode](f-node-directive) directive to enable dragging functionality.
6+
7+
## Styles
8+
- `.f-component` A general class applied to all F components for shared styling.
9+
10+
- `.f-drag-handle` Class specific to the drag handle directive, providing styles for the drag handle representation.
11+
12+
## Usage
13+
14+
#### Node with drag handle
15+
16+
We need to add the **fDragHandle** directive inside [fNode](f-node-directive) to specify the handle for dragging.
17+
This can be any element inside the node that will act as the drag handle.
18+
19+
```html
20+
<f-flow |:|fDraggable|:|>
21+
<f-canvas>
22+
<div fNode [fNodePosition]="{ x: 100, y: 200 }">
23+
<div |:|fDragHandle|:|>Node</div>
24+
</div>
25+
</f-canvas>
26+
</f-flow>
27+
```
28+
29+
#### Disabling Dragging
30+
31+
This code snippet shows how to disable dragging for a node.
32+
33+
```html
34+
<f-flow fDraggable>
35+
<f-canvas>
36+
<div fNode |:|[fNodeDraggingDisabled]="true"|:| [fNodePosition]="{ x: 100, y: 200 }">
37+
<div fDragHandle>Node</div>
38+
</div>
39+
</f-canvas>
40+
</f-flow>
41+
```

0 commit comments

Comments
 (0)