Element Bounding
Reactive bounding box of an HTML element.
Usage
<script>
import { elBound } from "@sveu/actions"
function fn(data) {
console.log(data)
}
</script>
<textarea use:elBound="{fn}"></textarea><script>
import { elBound } from "@sveu/actions"
function fn(data) {
console.log(data)
}
</script>
<textarea use:elBound="{fn}"></textarea>svelte
Example
<script lang="ts">
import { elBound } from "@sveu/actions"
import type { ElementBoundData } from "@sveu/actions"
let height = 0,
bottom = 0,
left = 0,
right = 0,
top = 0,
width = 0,
x = 0,
y = 0
$: text = `
height: ${height}
bottom: ${bottom}
left: ${left}
right: ${right}
top: ${top}
width: ${width}
x: ${x}
y: ${y}
`
function fn(data: ElementBoundData) {
x = data.x
y = data.y
right = data.right
left = data.left
top = data.top
bottom = data.bottom
width = data.width
height = data.height
width = data.width
}
</script>
<div class="text-center">
<textarea
class="border border-4 h-63 w-75"
readonly
value="{text}"
use:elBound="{fn}"></textarea> <!-- -->
</div>
<script lang="ts">
import { elBound } from "@sveu/actions"
import type { ElementBoundData } from "@sveu/actions"
let height = 0,
bottom = 0,
left = 0,
right = 0,
top = 0,
width = 0,
x = 0,
y = 0
$: text = `
height: ${height}
bottom: ${bottom}
left: ${left}
right: ${right}
top: ${top}
width: ${width}
x: ${x}
y: ${y}
`
function fn(data: ElementBoundData) {
x = data.x
y = data.y
right = data.right
left = data.left
top = data.top
bottom = data.bottom
width = data.width
height = data.height
width = data.width
}
</script>
<div class="text-center">
<textarea
class="border border-4 h-63 w-75"
readonly
value="{text}"
use:elBound="{fn}"></textarea> <!-- -->
</div>
svelte
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
Click fold/expand code
API
Arguments
| Name | Description | Type | Required |
|---|---|---|---|
| fn | A function that receive the bounding box of the element. | (data: BoundingData) => void | Yes |
TIP
If you use typescript, you need to add ./node_modules/@sveu/actions/events.d.ts to your tsconfig.json file.
{
...
"include": [
...
"./node_modules/@sveu/actions/events.d.ts"
]
...
}{
...
"include": [
...
"./node_modules/@sveu/actions/events.d.ts"
]
...
}json