Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

SwipeOptionsContainer

A ListView delegate container to implement swipeable rows within a ListView. More...

Import Statement: import Felgo 3.0

Properties

Signals

Methods

Detailed Description

This is a container item for components which can be swiped horizontally to reveal options. It is intended for swipe-able list view rows, like in many native apps on Android or iOS.

SwipeOptionsContainer can be wrapped around any QML Items. You can then specify an Item as leftOption and/or rightOption, to enable swiping to the left or right to reveal these items as options.

If used inside the delegate of an AppListView, starting the swipe gesture in any row will automatically close the options of another row, if currently opened.

Example Usage

To add swipe options to the rows of an AppListView, the following code can be used. It uses SwipeButton items to add the buttons:

 App {

   ListPage {
     //some JS array as list model
     model: [{text: "Item 1", detailText: "Detail 1"}, {text: "Item 2", detailText: "Detail 2"}]

     // define the SwipeOptionsContainer as delegate
     delegate: SwipeOptionsContainer {
       id: container

       SimpleRow {                         //actual content to be displayed in the list rows
         id: row
       }

       leftOption: SwipeButton {           //left options, displayed when swiped list row to the right
         text: "Option"
         icon: IconType.gear
         height: row.height
         onClicked: {
           row.item.text = "Option clicked"
           row.itemChanged()
           container.hideOptions()         //hide automatically when button clicked
         }
       }

       rightOption: AppActivityIndicator { //right options, displayed when swiped list row to the left
         height: row.height
         width: height
       }
     } // SwipeOptionsContainer
   } // ListPage

 }

Note: SwipeOptionsContainer can only have one direct child Item, which will be the visible content.

Property Documentation

[read-only] isLeft : bool

Read-only property holding the current visibility state of the leftOption item. If the leftOption item is currently revealed (visible) true, otherwise false.


[read-only] isRight : bool

Read-only property holding the current visibility state of the rightOption item. If the rightOption item is currently revealed (visible) true, otherwise false.


leftOption : Item

Set this property to a custom item which should get visible if the user swipes the container item to the right (revealing the left option).

If this property is not set the swipe right gesture is ignored.


overshoot : bool

If overshoot is set to false, the row can only be dragged until the swipe options are fully shown.

The default value is false. This causes the row to be draggable infinitely and snap back on release.

This property was introduced in Felgo 3.3.0.


rightOption : Item

Set this property to a custom item which should get visible if the user swipes the container item to the left (revealing the right option).

If this property is not set the swipe left gesture is ignored.


Signal Documentation

leftOptionShown()

Called after the user swipes the container to the right so that the leftOption item got revealed.


rightOptionShown()

Called after the user swipes the container to the left so that the rightOption item got revealed.


Method Documentation

hideOptions()

Call this method to hide a currently visible leftOption or rightOption again.


showLeftOption()

Call this method to show the leftOption.

This method was introduced in Felgo 3.3.0.


showRightOption()

Call this method to show the rightOption.

This method was introduced in Felgo 3.3.0.