A detailed description of working with JET elements and classes in your typescript project can be found at:
JET Typescript Usage.
This class provides functions for setting up and handling swipe to reveal on an offcanvas element. The offcanvas
element contains contextual actions that users can perform on the element that user perform the swipe gesture on.
This is most commonly found in ListView where user swipes on an item to reveal contextual actions that can be done on the item.
Styling
The following CSS classes can be applied by the page author as needed.
| Class |
Description |
| oj-swipetoreveal-more |
Designed for use with an action item that shows more available actions that users can perform.
Is applied to the element that represents the more action item inside the offcanvas element. |
| oj-swipetoreveal-flag |
Designed for use with an action item that tags the associated item in the host like listview item.
Is applied to the element that represents the flag action item inside the offcanvas element. |
| oj-swipetoreveal-alert |
Designed for use with an action item that performs an explicit action like deleting the associated listview item.
Is applied to the element that represents the alert action item inside the offcanvas element. |
| oj-swipetoreveal-default |
Designed for use with an action item that should get all the space when user swipes pass the threshold distance.
Is applied to the element that represents the default action item inside the offcanvas element. |
Touch End User Information
| Target |
Gesture |
Action |
| Offcanvas wrapper element |
Swipe |
Reveals the offcanvas element. Depending on the distance relative to the target is swiped, the offcanvas will either be closed (swipe distance too short), opened, or the default action is performed (swipe distance passed the specified threshold). |
| Offcanvas wrapper element |
Pan |
Reveals the offcanvas element. If a default action is specified, the default action will get the entire space of the offcanvas after the user panned past a specified distance threshold. |
Accessibility
Application must ensure that the context menu is available and setup with the
equivalent menu items so that keyboard-only users can perform all the swipe actions
just by using the keyboard.