How-to: CSS Table Swipe Interaction
source link: https://uxplanet.org/how-to-css-table-swipe-interaction-652b8cabeeea
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How-to: CSS Table Swipe Interaction
Table rows or list items often have actions associated to them, such as deleting, sharing and editing. When designing for touch devices, UX designers can take advantage of swipe gestures to allow users to quickly perform common actions without having to navigate to a different page or open drawers or modal dialogs.
Gesture based interactions are supported by native mobile languages, but can be tricky to implement in HTML/CSS/JS and are often over-done with excessive use of JavaScript, which can cause low performance and chunky interactions.
In this post, I will walk through 3 simple steps to build a swipe gesture interaction using solely HTML, CSS and a little bit of JS.
Note: the demos in this post should be used on touch devices.
Basic requirements
Let’s start by defining what we want to build. Our swipe snippet should allow the user to:
- Use touch to swipe a table row either right or left.
- Unveil an action (icon and coloured background) when the user swipes.
- Automatically restore scroll position when the user releases the finger.
- Trigger an action when the user releases the finger (in case they have swiped far enough).
1. Setting the swipe-able element
As a first step, let’s create our swipe-able element and add basic styles to it. To style it, it is given a class named .swipe-element
.
To set the stage for the swipe interaction, we can wrap the element around a div with the class name of .swipe-container
.
- To reduce the visual clutter, the
.swipe-container
should have the scrollbar hidden. - To automatically restore scroll position, the
.swipe-container
should havescroll-snap-type: x mandatory
. - To indicate which element should be in focus when automatically restoring the scroll position, the
.swipe-element
should havescroll-snap-align: start
.
2. Adding the left and right actions
With the container and scrolling logic in place, the only step missing is to add the actions.
The icons used in this example are from the Material Icons font.
- As a wrapper for the icon, the
.action
div, as well as the previously added.swipe-element
should havemin-width: 100%
. - The
i
icon should have a sticky position to ensure it is always visible as soon as the user starts swiping. - the
.right
action should havejustify-content: flex-end
to make thei
icon stick to the right side.
3. Triggering the action
When the user releases the finger, our element should check how far the user has swiped and trigger an action in case they have done it far enough.
There should be a distinction between left and right swipe, so the application can handle them independently.
- To start, an
ontouchend
event listener should be added to the.swipe-container
. - In a function called
handleSwipe()
, we should first define theminDistance
the user should swipe for the action to be triggered. - After that, we should calculate the
swipeDistance
by simply subtracting the container’sclientWidth
from itsscrollLeft
. - Negative values represent a left swipe, while positive ones indicate a right one. In case the
swipeDistance
is smaller thanminDistance * -1
, we should trigger the left action, and if it is greater thanminDistance
, the right action should be triggered instead. - In case the user hasn’t swiped either left or right further than the
minDistance
, nothing should be triggered.
Conclusion
Using standard CSS selectors, we have built a swipe-able element that can be used for enhancing the user experience of lists and tables on mobile devices.
With some tweaks and a little bit of imagination, this snippet can be modified or extended to show only one action or indicating visually whether the user has swiped far enough, for example.
This snippet is available as a plug-and-play component in the Kor UI library.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK