Deck Swiper

The Deck Swiper Component lets you display a stack of swipeable cards.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Configuration Properties

PropertyDescription
Component NameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Deck Swiper.
Infinite swipingWhether to infinitely loop through cards or not
Vertical swipe enabledTo enable the cards to be swiped vertically.
Horizontal swipe enabledTo enable the cards to be swiped horizontally.
Start card indexIndex of the card to start swiping from
Visible card countNumber of cards visible behind (and including) the current card

Data Properties

PropertyDescription
DataAn array of data to present as cards

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Trigger nameDescription
On Index ChangedRuns the Actions when swiped
On End ReachedRuns the Actions when the end of the cards is reached
On Swiped LeftRuns the Actions when swiped left
On Swiped RightRuns the Actions when swiped right
On Swiped UpRuns the Actions when swiped up
On Swiped DownRuns the Actions when swiped down
On SwipeRuns the Actions when the element is swiped
On Start SwipeRuns the Actions when swipe starts
On End SwipeRuns the Actions when swipe ends

Example

In the example below, we're creating a dating app screen where a user can swipe through other user profiles.