ftd.dev/event-handling.ftd at main · arcoprova/ftd.dev · GitHub

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
-- ft.page-with-toc: Event Handling
toc: $config.api-toc
sub-sections: $config.doc-header


-- ft.markdown:

FTD supports event handling using `$on-<event-name>$` header.


-- boolean open: true


-- ftd.column:
padding: 20
border-width: 2
border-radius: 5
width: fill
margin-bottom: 20

--- ftd.text: the heading (click to toggle)
$on-click$: toggle $open

--- ftd.text:
if: $open

This is some **markdown text**.

--- ft.code:
if: $open
lang: py
import os

print(os)


-- ft.code: source of the example shown above
lang: ftd

\-- boolean open: true


\-- ftd.column:
padding: 20
border-width: 2
border-radius: 5
width: fill
margin-bottom: 20

\--- ftd.text: the heading (click to toggle)
$on-click$: toggle $open

\--- ftd.text:
if: $open

This is some **markdown text**.

\--- ft.code:
if: $open
lang: py

import os

print(os)


-- ft.h1: `$on-<event-name>$: <action> <action-arguments>`

FTD supports a few events, like `click`, which is mapped to an "action", eg
there is an action `toggle`, which toggles a Boolean variable. Actions take data
also, say `toggle` needs to know what variable to toggle.

This gives us: `$on-click$: toggle open`. Here we are using a variable named
`open` to keep track of if the component is in the "open state" or not.

More than one event handler can be assigned to same event, and more than one event
can be added to a component.


-- ft.h1: Event `click`

This event is used to track mouse clicks.


-- ft.h1: Action `toggle`

This action is used to toggle a Boolean variable.