Skip to content

Added 'Allowed Swipe Direction' property Info #233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 17, 2024
Merged

Added 'Allowed Swipe Direction' property Info #233

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ece6c9f
Added Allowed Swipe Direction property info
pinkeshmars Dec 16, 2024
9f0e753
Update docs/resources/ui/widgets/built-in-widgets/swipeablestack.md
pinkeshmars Dec 16, 2024
055734a
Update image asset
pinkeshmars Dec 17, 2024
28f44f3
Merge branch 'main' into pinkesh/allow-swipe-direction-property
leighajarett Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/resources/ui/widgets/built-in-widgets/imgs/allowed-swipe-direction.png
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Arent we doing light mode images anymore?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we still use light mode images only, but for this case, almost all assets on this page are dark themed. So, to maintain consistency, I used a black one. Whenever in the future we take this for full or partial rewrite, we can update with light mode images.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even for these cases, we could still do light mode images, because we are adding more efforts on our end, like waiting for the rewrite and only then changing completely. Because some of the topics may not go for a rewrite very soon. If we are adding new section to an old topic, or updating a section of a topic, we should still follow what we would have done for a completely new topic.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ya, it's updated now.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions docs/resources/ui/widgets/built-in-widgets/swipeablestack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,23 @@ To loop the cards in SwipeableStack, move to the **Properties Panel > SwipeableS

![loopcard](imgs/loopcard.avif)

### Allowed Swipe Direction
You can control the directions in which users can swipe cards by adjusting the **Allowed Swipe Direction** property. It enables you to customize how users interact with the SwipeableStack, letting you limit swipes to certain directions or enable swiping in any direction.

To do so, navigate to the **Properties Panel > SwipeableStack Properties > Allowed Swipe Direction**, and select one of the following options:

- **All**: Users can swipe in all directions.
- **Left**: Swipe only to the left.
- **Right**: Swipe only to the right.
- **Down**: Swipe only downward.
- **Up**: Swipe only upward.
- **Vertical**: Swipe up or down.
- **Horizontal**: Swipe left or right.

For example, in a dating app, you can set the **Allowed Swipe Direction** to **Horizontal**, enabling users to swipe left to "dislike" and right to "like" a profile.

![allowed-swipe-direction.png](imgs/allowed-swipe-direction.png)

### Customize card display count and scale

You can adjust how many cards are visible in the stack at one time and how they are scaled. This customization enhances the UX by letting you create a more engaging and visually appealing card stack, where the depth and hierarchy of cards can be easily perceived by users.
Expand Down
Loading