ftd
The change in the state of an object is known as an Event. In fastn
, there are various events which represents that some activity is performed by the user. A function reacts over these events and allow the execution. This process of reacting over the events is called Event Handling.
We can create our own function or use built-in function
.
fastn
on-click
on-click
event can be used to call a function when the user clicks on the element.-- boolean $show: true -- ftd.text: Click me! $on-click$: $ftd.toggle($a = $show) -- ftd.text: Hide and Seek if: { show }
on-click-outside
on-click-outside
event can be used to call a function when the user clicked outside the element-- boolean $show: false -- ftd.text: Click me and click outside then $on-click$: $ftd.set-bool($a = $show, v = true) $on-click-outside$: $ftd.set-bool($a = $show, v = false) -- ftd.text: Hide and Seek if: { show }
on-mouse-enter
on-mouse-enter
event can be used to call a function when the mouse cursor enters the element.-- boolean $show: true -- ftd.text: Enter mouse cursor over me $on-mouse-enter$: $ftd.toggle($a = $show) -- ftd.text: Hide and Seek if: { show }
on-mouse-leave
on-mouse-leave
event can be used to call a function when the mouse cursor leaves the element.-- boolean $show: true -- ftd.text: Enter mouse cursor over me $on-mouse-enter$: $ftd.set-bool($a = $show, v = true) $on-mouse-leave$: $ftd.set-bool($a = $show, v = false) -- ftd.text: Hide and Seek if: { show }
on-input
The on-input
event can be used to call a function when the user inputs something into the element.
VALUE
which is available for ftd.text-input
component. This gives the value typed by user on this element.-- string $txt: Fifthtry -- ftd.text: $txt -- ftd.text-input: placeholder: Type any text ... type: text width.fixed.px: 400 border-width.px: 2 $on-input$: $ftd.set-string($a = $txt, v = $VALUE)
on-change
The on-change
event can be used to call a function when the value of the element changes and focus is moved out of the element.
VALUE
which is available for ftd.text-input
component. This gives the value typed by user on this element.-- string $txt: Fifthtry -- ftd.text: $txt -- ftd.text-input: placeholder: Type any text ... type: text width.fixed.px: 400 border-width.px: 2 $on-change$: $ftd.set-string($a = $txt, v = $VALUE)
on-blur
on-blur
event can be used to call a function when an element loses focus.on-focus
on-focus
event can be used to call a function when an element receives focus.-- boolean $flag: false -- ftd.text-input: placeholder: Type any text ... type: text width.fixed.px: 400 border-width.px: 2 background.solid if { flag }: $inherited.colors.background.step-1 background.solid: $inherited.colors.background.step-2 $on-focus$: $ftd.set-bool($a = $flag, v = true) $on-blur$: $ftd.set-bool($a = $flag, v = false)
on-global-key[<hyphen-seperated-keys>]
on-global-key
event can be used to call a function when gives keys are pressed simultaneously. For instance, on-global-key[ctrl-a-s]
triggers the event when keys ctrl
, a
and s
are pressed simultaneously.-- boolean $flag: true -- ftd.text: Press ctrl, a and s simultaneously color: purple color if { flag }: green $on-global-key[ctrl-a-s]$: $ftd.toggle($a = $flag)
on-global-key-seq[<hyphen-seperated-keys>]
on-global-key
event can be used to call a function when gives keys are pressed sequentially i.e. one after another. For instance, on-global-key-seq[ctrl-ctrl-ctrl]
triggers the event when keys ctrl
, ctrl
and ctrl
are pressed sequentially.-- boolean $flag: true -- ftd.text: Press ctrl, ctrl and ctrl sequentially color: purple color if { flag }: green $on-global-key-seq[ctrl-ctrl-ctrl]$: $ftd.toggle($a = $flag)
Have a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!We welcome you to join our Discord community today.
We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.