Tabris.js Properties: HighlightOnTouch
The highlightOnTouch property can be set on any widget. If set to true, the widget will give visual feedback when touched. On Android, a ripple animation will radiate out from the center of the widget.
By default, the highlightOnTouch property is set to false. If you press on a TextView, for example, there would be no indication that any “touch event” has fired on that widget. The text will just stand there, blandly.
An exception is a Button, which by default highlights when pressed.
The example in the Tabris playground shows a Composite with its highlightOnTouch property set to true.
highlightOnTouch does not prevent a tap event from bubbling up to the parent widget. Take the following example:
|
1 2 3 4 5 6 7 8 9 10 11 |
import {TextView, contentView, Stack} from 'tabris'; contentView.append( <Stack stretch onTap={sayHi} padding={16} spacing={16} alignment='stretchX'> <TextView highlightOnTouch text='HighlightOnTouchElement'/> </Stack> ); function sayHi() { console.log('hi'); } |
We have a TextView that highlights on touch with a Stack widget as its parent. When we touch the TextView, the tap event will propagate to the Stack widget, and ‘hi’ will be logged in the console.
This is potentially confusing for users. The TextView, not Stack, gave visual feedback. So we might want to handle the tap event on the TextView and stop it from propagating through.
|
1 2 3 4 5 6 7 |
<TextView highlightOnTouch onTap={handleEventOnTextView} text='HighlightOnTouchElement'/> function handleEventOnTextView() { console.log('just the text view is pressed'); //stop event from propagating return false; } |
Now when we tap the TextView, only ‘just the text view is pressed’ is logged to the console.
“TextView with highlight on touch enabled”
For more information about the properties, methods, and events of the Widget base class check out the documentation.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
