Skip to main content

SILK UI Framework

 

OutSystems

TouchEvents Pattern

The TouchEvents pattern enables touch events on a specific widget.

How to Use the TouchEvents Pattern

You can use the pattern to hide a header during a scroll action.

1. Add the TouchEvents pattern to the Layout block.

2. Add an End event.

3. Add logic.

var header = document.querySelector(".hearder");

header.classList.add("hide");
header.classList.add("header-on-scroll");
var header = document.querySelector(".header");

header.classList.remove("hide");
header.classList.remove("header-on-scroll");

 

Result:

Input Parameters

Input Name Description Default Value
WidgetId This is the element that responds to the touch you configure. none

Events

Event Name Description Mandatory
End The event is triggered after the movement event finishes. False
Move The event is triggered after the movement starts. False
Start The event is triggered as the touch movement starts. False

 

Compatibility with other Patterns

There might be conflicts with any pattern with touch events used together with this pattern (unless the code is altered to expect this behavior). 

Samples

The following sample uses the TouchEvents pattern:

  • Was this article helpful?