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

Property	Description
Component Name	To alter the name of the component. The name is reflected in the Components tree. Defaults to Deck Swiper.
Infinite swiping	Whether to infinitely loop through cards or not
Vertical swipe enabled	To enable the cards to be swiped vertically.
Horizontal swipe enabled	To enable the cards to be swiped horizontally.
Start card index	Index of the card to start swiping from
Visible card count	Number of cards visible behind (and including) the current card

Data Properties

Property	Description
Data	An 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 name	Description
On Index Changed	Runs the Actions when swiped
On End Reached	Runs the Actions when the end of the cards is reached
On Swiped Left	Runs the Actions when swiped left
On Swiped Right	Runs the Actions when swiped right
On Swiped Up	Runs the Actions when swiped up
On Swiped Down	Runs the Actions when swiped down
On Swipe	Runs the Actions when the element is swiped
On Start Swipe	Runs the Actions when swipe starts
On End Swipe	Runs 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.